BEM 命名 ​

什么事 BEM 命名规范 ​

BEM 分别代表着：Block（块）、Element（元素）、Modifier（修饰符），是一种组件化的 CSS 命名方法和规范，由俄罗斯 Yandex 团队所提出。其目的是将用户界面划分成独立的（模）块，使开发更为简单和快速，利于团队协作开发。

特点 ​

• 组件化/模块化的开发思路。
• 书写方式解耦化，不会造成命名空间的污染，如：.xxx ul li 写法带来的潜在嵌套风险。
• 命名方式化扁平，避免样式层级过多而导致的解析效率降低，渲染开销变大。
• 组件结构独立化，减少样式冲突，可以将已开完成的组件快速应用到新项目中。
• 有着较好的维护性、易读性、灵活性。

规则 ​

BEM 的命名模式在社区中有着不同方式，以下为 Yandex 团队所提出的命名规则为（本文中的代码使用该规则）：

.[Block 块]__[Element 元素]_[Modifier 修饰符]

.[Block 块]__[Element 元素]_[Modifier 修饰符]

不同的命名模式，区别在于 BEM 之间的连接符号不同，依个人而定：

.[Block 块]__[Element 元素]--[Modifier 修饰符]

.[Block 块]__[Element 元素]--[Modifier 修饰符]

任何一种规范，都是基于实际需求而定，便于团队开发和维护扩展，每个规范都是经过合理评估后所得出的一种“思路”和“建议”。

Block（块） ​

是一个独立的实体，即通常所说的模块或组件。

例：header、menu、search

规则 ​

• 块名需能清晰的表达出，其用途、功能或意义，具有唯一性。
• 块名称之间用-连接。
• 每个块名前应增加一个前缀，这前缀在 CSS 中有命名空间（如：m-、u-、分别代表：mod 模块、ui 元件）。
• 每个块在逻辑上和功能上都相互独立。
• 由于块是独立的，可以在应用开发中进行复用，从而降低代码重复并提高开发效率。
• 块可以放置在页面上的任何位置，也可以互相嵌套。
• 同类型的块，在显示上可能会有一定的差异，所以不要定义过多的外观显示样式，主要负责结构的呈现。
• 这样就能确保块在不同地方复用和嵌套时，增加其扩展性。

.[命名空间]-[组件名/块]__[元素名/元素]--[修饰符]

.[命名空间]-[组件名/块]__[元素名/元素]--[修饰符]

示例：构建一个 search 组件

<form class="m-search m-search-form_dark">
    <input class="m-search__input">
    <!-- disabled 表明 search__button 的状态 -->
    <button class="m-search__button m-search__button_disabled">Search</button>
</form>

<form class="m-search m-search-form_dark">
    <input class="m-search__input">
    <!-- disabled 表明 search__button 的状态 -->
    <button class="m-search__button m-search__button_disabled">Search</button>
</form>

我更习惯于将一些修饰命名单独抽离，如下：

<form class="m-search m-search-form is-dark">
    <input class="m-search__input">
    <!-- is-disabled 表明状态 -->
    <button class="m-search__button is-disabled">Search</button>
</form>

<form class="m-search m-search-form is-dark">
    <input class="m-search__input">
    <!-- is-disabled 表明状态 -->
    <button class="m-search__button is-disabled">Search</button>
</form>

很多组件库的实现是采用 BEM 命名方案，如常见的 Element UI