BEM 设计模式

BEM 是一种有些的 CSS 设计模式，在封装组件时具有很好的优势，并且写出来的代码易于维护。BEM 的最大的特点是与现有 MVVM 框架具有良好的结合。让在封装组件的时候，HTML 与 JS 配合 CSS 在执行，CSS占据“主导地位”。如果使用了CSS预处理或者POSTCSS等工具，极大的增加了组件的开发效率。

• 模块（没有前缀，多个单词用 - 连接）
• 元素（元素在模块之后，可以有多个层级，以 __ 连接）
• 修饰（某元素、或者某模块特别的状态，必须有一个状态名和状态值，使用 _ 链接）

/* 例1 */
.header{}
.header__wrap{}
.header__logo{}
.header__nav{}
.header__nav-item{}
.header__nav-item:hover{}
.header__nav-item_status_active{}
.header__nav-item_status_active::after{}
.header__nav-item_custom_button{}

/* 例2 */
.screen-1{}
.screen-1__heading{}
.screen-1__heading b{}
.screen-1__phone{}
.screen-1__shadow{}

B

B 是 block 的缩写，是对一个组件名抽象如：

• Grid 网格组件，我们就可以将 B 抽象为 Grid
• Tab 组件，我们就可以将 B 抽象为 Tab

E

E 是 element 的缩写，是一个组件（或者 Block）中具体的元素，这个元素最好也是概括的命名。

特点

• E 是可省略，可以没有的
• BE 的链接符 __ 双下划线

例如： van-submit-bar__price 中 __price 就是在 element, element 也是死板的，是根据具体的需求演变的，中间可以使用 - 来演变。

M

M 其实就是写修饰符，它主要正对的是 Block 本身。我们可以思考一下 CSS 中哪些事可做修饰的：

• 颜色
• 大小

特点

• 装饰
• 可省略
• BM、EM 的链接符都是 -- 双中划线

缺点

1. 缺点就在于所在的优点：代码有耦合度，不向原子类CSS的设计思想完全解耦。
2. BEM 有时候需要 JavaScript 或者脚本的本利，然后 BEM 更简单