抖音页面的制作实战，原来如此简单？-BEM命名规范介绍

站长

2024年06月12日 19:56 · 阅读数 32

前言

在当今快速迭代的Web开发领域，构建可维护、可扩展且适应性强的用户界面成为了每个前端工程师面临的挑战。随着项目规模的扩大和团队成员的增加，如何确保代码的一致性、提升组件的重用率，以及加快新成员的融入速度，成为提升开发效率的关键因素。正是在这样的背景下，BEM（Block Element Modifier）这一革命性的前端开发方法论应运而生。

正文

什么是BEM

BEM（Block Element Modifier）是一种前端开发中用于组织CSS类名的命名约定，由Yandex公司提出。该方法论旨在提高代码的可维护性、可扩展性和团队协作效率，尤其适用于大型项目和组件化开发。BEM的核心理念围绕着三个基本概念展开：

1. Block（区块）

定义：一个Block是页面上的一个独立功能单元或者一个可复用的组件。它能够独立存在并完成一定的功能，比如导航栏、卡片、按钮等。
命名示例：.header、.form、.product-grid

2. Element（元素）

定义：Block内的组成部分，没有独立的意义，依赖于其所属的Block。Elements不能脱离Block单独使用。
命名示例：.header__logo、.form__input、.product-grid__item
规则：Element名称通过双下划线__连接到其所属的Block名称，表明了Element与Block之间的归属关系。

3. Modifier（修饰符）

定义：用于描述Block或Element的不同状态或变体，比如颜色变化、大小变化、激活状态等。
命名示例：.button--primary、.list-item--selected、.modal--open
规则：Modifier名称通过两个连字符--附加到Block或Element名称之后，用来表示状态或样式的变化。

BEM的优势

提高可维护性：清晰的命名规则使得代码易于理解和维护，即使是新加入项目的开发者也能快速定位和修改样式。
便于复用：Block的高内聚低耦合特性支持跨项目复用，Element和Modifier的灵活性允许在不同上下文中调整样式。
减少选择器的嵌套：鼓励扁平化的CSS结构，减少因过度嵌套而导致的性能问题和选择器的复杂度。
促进团队协作：统一的命名规则减少了沟通成本，团队成员可以遵循相同的编码规范，协同工作更加高效。

了解了BEM的命名规范，我们来实战一下！

我们来试着写一写这个抖音的界面

我们先来分析一下这个界面：

这一模块是抖音应用中的常用功能（function），所以我们可以命名为dy-fc

总体布局可以分为上下两部分，我们可以将顶部模块当成头部命名为dy-fc__hd

而下面的各个功能的模块我们当作身体命名为dy-fc__bd

将顶部模块中的标题模块命名为dy-fc__title

将下面每个功能模块命名为dy-fc__item

这样我们就该界面分析完了，并以BEM的命名规范进行命名

抖音页面的制作实战，原来如此简单？-BEM命名规范介绍

开始写代码！

<div class="dy-fc">
        <div class="dy-fc__hd">
            <span class="dy-fc__title">常用功能</span>
        </div>
        <div class="dy-fc__bd">
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">我的钱包</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">券包</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">小程序</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">观看历史</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">内容偏好</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">离线模式</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">设置</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">稍后再看</p>
            </a>
        </div>
    </div>

这个界面基本的结构就是这样的，然后我们来写一下它的样式

首先重置默认样式

* {
    margin: 0;
    padding: 0;
}

接着我们给整个界面设为暗白色，初始化<a>标签

body {
    background-color: rgba(211, 209, 209, 0.25);
}
a{
    text-decoration: none;
}

然后我们设置一下整个模块的样式: 设置宽占比为94%，设置外边距为10px并居中将背景颜色设为白色调整边角弧度

.dy-fc {
    width: 94%;
    margin: 10px auto;
    background-color: #fff;
    border-radius: 10px;
}

再然后是设置头部模块和标题

.dy-fc__hd {
    padding: 10px;
}
.dy-fc__title {
    font-size: 18px;
    font-weight: bold;
}

继续是身体模块我们将其设置为弹性容器并定义换行属性，使容器内的元素能够按行或列排列，并且可以自动换行、自动调整元素的位置和大小。它使得布局更加灵活和方便。

.dy-fc__bd {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}

随后是各个功能模块，我们将宽度设置为33%，使得三个为一行

.dy-fc__item {
    width:33%;
    text-align: center;
    line-height: 2.1em;
    color: black;
    padding-bottom: 10px;
}

再然后就是图片和底部文字的样式啦

img {
    width: 30px;
    height: 30px;
}
.dy__desc {
    font-size: 14px;
    font-weight: bold;
    font-family: sans-serif;
}

这样我们就完成了抖音常用功能的实战页面

上图片！

抖音页面的制作实战，原来如此简单？-BEM命名规范介绍

总结

在实际应用中，可以根据项目规模和需求灵活调整BEM的严格程度，例如引入简写规则或使用工具自动处理类名生成。结合现代前端框架和工具（如Vue、React的CSS Modules或SASS的嵌套规则）可以进一步简化BEM的编写过程，同时保持其核心优点。

BEM不仅仅是一种命名方式，更是一种思维方式，它帮助开发者从模块化和可维护性的角度去设计和构建界面，是现代前端开发不可或缺的一部分。

附源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖音负一屏常用功能</title>
</head>
<style>
    * {
    margin: 0;
    padding: 0;
}
body {
    background-color: rgba(211, 209, 209, 0.25);
}
a{
    text-decoration: none;
}
.dy-fc {
    width: 94%;
    margin: 10px auto;
    background-color: #fff;
    border-radius: 10px;
}
.dy-fc__hd {
    padding: 10px;
}
.dy-fc__title {
    font-size: 18px;
    font-weight: bold;
}
.dy-fc__bd {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}
.dy-fc__item {
    width:33%;
    text-align: center;
    line-height: 2.1em;
    color: black;
    padding-bottom: 10px;
}
img {
    width: 30px;
    height: 30px;
}
.dy__desc {
    font-size: 14px;
    font-weight: bold;
    font-family: sans-serif;
}

</style>
<body>
    <div class="dy-fc">
        <div class="dy-fc__hd">
            <span class="dy-fc__title">常用功能</span>
        </div>
        <div class="dy-fc__bd">
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">我的钱包</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">券包</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">小程序</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">观看历史</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">内容偏好</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">离线模式</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">设置</p>
            </a>
            <a href="#" class="dy-fc__item">
                <img src="" alt="">
                <p class="dy__desc">稍后再看</p>
            </a>
        </div>
    </div>

</body>
</html>

本文图标均是来自iconfont-阿里巴巴矢量图标库

转载自:https://juejin.cn/post/7373946076761964581