小白必学——BEM命名规范BEM（Block Element Modifier）命名规范，作为前端开发领域的一项重要实践

BEM（Block Element Modifier）命名规范，作为前端开发领域的一项重要实践，自提出以来便因其强大的可维护性和可扩展性特性，受到了广泛的关注和应用。特别是对于新手开发者来说，掌握BEM命名规范不仅能够极大地提升编码效率，减少因类名选择不当导致的时间浪费，还能从根本上改善代码的可读性和可维护性，确保项目在不断迭代中依然保持清晰的结构。

一、 BEM命名规范的核心价值

在没有统一命名规则的情况下，初学者在构建页面时往往能较好地把握HTML结构，但在为各部分元素命名时却容易陷入困境。传统做法中，开发者倾向于为每个元素独立命名，这种方式看似直观，实则容易导致类名之间缺乏关联性，使得CSS样式难以管理和维护，尤其是在大型项目中，这种问题更为凸显。BEM正是为了解决这一问题而生，它提供了一套系统化的命名规则，确保类名能够准确反映元素之间的逻辑关系和功能状态。

二、基本概念

Block（区块） ：一个具有独立意义、可复用的功能单元。在HTML中通常对应一个标签或者一组相关标签。
Element（元素） ：构成Block的子部分，没有独立的意义，依赖于其所属的Block。Element不能脱离Block而存在。
Modifier（修饰符） ：用于表示Block或Element的不同状态或变体。

三、命名规则

Block命名：使用驼峰式命名法，如header, navigation, userProfile等。
Element命名：Block名后跟双下划线__，再加上Element的名称，如header__nav, navigation__item。这表明Element是属于哪个Block的直接组成部分。
Modifier命名：
- 对于Block的Modifier，在Block名后添加双短横线--，然后是Modifier名，例如button--primary, container--fluid。
- 对于Element的Modifier，在Element的完整名称（包括Block名和双下划线）后添加双短横线--，再接Modifier名，例如list__item--selected, form__input--disabled。

四、案例分析

简单看一下这个案例，整个页面是一个盒子，将盒子分成上下两部分。上部分装有标题和描述，下部分装有三个按钮。

这么多盒子，元素应该咋命名呢？

这就来到今天要用到今天分享的BEM命名。

五、元素命名

<div class="page">
        <div class="page__hd">
            <div class="page__title">
            Button
            </div>
            <p class="page__desc">
            按钮
            </p>
        </div>
        <div class="page__bd">
            <div class="button-sp-area">
                <a href="#" class="weui-btn weui-btn_primary">主要操作</a>
                <a href="#" class="weui-btn weui-btn_default">次要操作</a>
                <a href="#" class="weui-btn weui-btn_warn">警告</a>
            </div>
        </div>
    </div>

整个页面取类名为page，上下两部分是page页面的子元素，按照BEM命名分别命名为page_hd,page_bd。

接下来为上下两部分添加元素：

上部分：用page_ title命名页面标题，用page_ desc命名页面描述下部分：用一个盒子作为所有按键的父级，用button-sp-area命名，在这个父级盒子下添加三个按钮，分别命名为weui-btn weui-btn_primary，weui-btn weui-btn_default，weui-btn weui-btn_warn。

六、 BEM命名的优势

1. 清晰的组件化结构

BEM通过定义Block（组件）、Element（组件内的元素）和Modifier（组件或元素的状态、变体）这三个概念，强制实施了一种高度模块化的代码组织方式。这种结构清晰地映射了UI组件的层级关系，使得开发者能够迅速理解组件的组成和行为，特别是在多人协作的项目中，减少了沟通成本。

2 增强CSS可维护性

由于BEM强调“一个类名对应一个功能”，避免了类名的模糊性和多重含义，使得CSS代码更加易于理解和维护。当需要修改或扩展样式时，开发者可以快速定位到相关的Block或Element，而不必担心影响到其他部分的样式，降低了样式间的耦合度。

3 提升代码复用性

通过将UI分解为可复用的Block，BEM鼓励开发者创建独立、自包含的组件。这些组件可以在项目的不同位置乃至跨项目复用，减少了重复代码，提高了开发效率。Element和Modifier的设计进一步增加了组件的灵活性，使得组件能够适应多种场景和状态变化

七、 BEM实践中的注意事项

避免嵌套过深：虽然BEM鼓励模块化，但过度的嵌套会导致类名过长，影响阅读和编写效率。合理规划Block和Element，尽量保持结构扁平化。
一致性和规范性：团队内部应统一BEM的使用规范，包括命名习惯、文件结构等，以确保代码风格的一致性。
工具辅助：利用BEM支持的工具（如BEM tools、PostCSS BEM plugin等）可以帮助自动化生成和管理类名，减少人为错误，提高开发效率。
适度抽象：在设计Block和Element时，应考虑其复用性和灵活性，合理抽象通用组件，减少重复代码。

八、完善下案例代码

将css部分补齐（可做参考）

    <style>
  
    * {
        margin: 0;
        padding: 0;
        outline: 0; /*轮廓 不同的浏览器不一样*/
    }
    /* css inherit 继承 */
    body, html {
        height: 100%;
        /* 按上去的高亮颜色  透明*/
        -webkit-tap-highlight-color: transparent;
    }

    body {
        /*为苹果用户优化 支持苹果特殊字体*/
        font-family: system-ui,-apple-system, sans-serif;

    }
    .page, body {
        background-color: #ededed;
    }

    .page {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       overflow-y: auto;/*page 一屏高度，用滚动条*/
       -webkit-overflow-scrolling: touch;/*滚动如丝般顺滑*/
       overflow-scrolling: touch;
    }
    .page__hd {
        padding: 40px;
    }
    .page__title {
        text-align: left;
        font-size: 20px; /*16*/
        margin-bottom: 15px;
        font-weight: 400;
    }
    .page__desc {
        margin-top: 4px;
        text-align: left;
        font-size: 14px;
        color:rgba(0,0,0,0.55);
    }

    .button-sp-area {
        /*顺时针*/
        margin: 15px auto;
        padding: 15px;
        text-align: center;
    }

    .weui-btn {
        display: block; /*inline -> block */
        width: 184px;
        margin: 0 auto;
        padding: 12px 24px;
        font-weight: 500;
        font-size: 17px;
        text-align: center;
        text-decoration: none;
        color: #fff;
        line-height: 1.4118;
        border-radius: 8px;
        /*webkit 代表android chrome， apple等内核 
            user-select 是比较新的属性，
            实验属性 -webkit-user-select 支持 有的新手机上能运行 
        */
        -webkit-user-select:none;
        user-select:none;/* 防止长按 select 用户会误解*/
        /* margin-bottom: 16px; */
    }
    /* 多态 用modifier*/
    .weui-btn_primary {
        background-color: #07c160;
    }
    .weui-btn_default {
        color: rgba(0,0,0,0.9);
        background-color: rgba(0,0,0,0.5);
    }
    .weui-btn_warn{
        background-color: #fa5151;
    }
    /* css 高级选择器  兄弟选择器*/
    .weui-btn+.weui-btn{
        margin-top:16px;
    }

    </style>

九、结语

BEM命名规范的引入，不仅仅是技术层面的革新，更是对前端开发思维模式的一种重塑。它强调了组件化思想，促使开发者从整体架构的角度出发，思考如何构建可维护、可复用的界面模块。随着Web应用的日益复杂，BEM的价值愈发显著，成为现代前端开发不可或缺的一部分。对于新手而言，掌握BEM不仅是技术栈的拓展，更是提升个人技能水平和项目协作能力的关键一步。通过实践BEM，开发者能够在快速变化的前端领域中，更加自信和高效地应对各种挑战。

小白必学——BEM命名规范

一、 BEM命名规范的核心价值

二、 基本概念

三、 命名规则

四、 案例分析

五、 元素命名