BEM

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

B

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

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

写 css 的时候可这样抽象：

.grid {
    // grid css props
}

.tab {
    // tab css props
}

E

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

特点

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

<text class="van-submit-bar__price price-class">
    <text class="van-submit-bar__currency">{{ currency }} </text>
        <text class="van-submit-bar__price-integer">{{ integerStr }}</text>
        <text>{{decimalStr}}</text>
     </text>
<text class="van-submit-bar__suffix-label">{{ suffixLabel }}</text>

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

M

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

• 颜色
• 大小
• ...

特点

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

<view class="custom-class {{ vertical ? 'van-loading--vertical' : '' }}">
  <view
    class="van-loading__spinner van-loading__spinner--{{ type }}"
  >
    <view
      wx:if="{{ type === 'spinner' }}"
      wx:for="{{ array12 }}"
      wx:key="index"
      class="van-loading__dot"
    />
  </view>

    <slot />
  </view>
</view>

缺点

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

JavaScript 和 BEM

• bem-cls
• easy-bem

接下来要做的

• 深入理解 BEM

参考

• BEM —— 源自Yandex的CSS 命名方法论