BEM

[yangbin1994]

BEM是一种CSS编写的命名约定，它的目标不是为了减少css类名嵌套层级，提高查询效率，而是提高编写效率和降低维护成本，适用于大型项目和多人开发。

• B:Block 封装一个独立的实体，它本身是有意义的。虽然块可以嵌套并相互交互，但语义上它们仍然是相等的;没有优先级或层次结构。没有DOM表示的整体实体(例如控制器或模型)也可以是块。

• E:Element 块的一部分，没有独立的意义。任何元素在语义上都与它的块相关联。

• M:Modifier 在块或元素上的标志。使用它们来改变外观、行为或状态。

[yangbin1994]

Block

命名

块名称可能由拉丁字母、数字和字符组成。要形成一个CSS类，需要在名称空间中添加一个简短的前缀: .block

HTML

如果它接受一个类名，任何DOM节点都可以是块。

<div class="block">...</div>

CSS

• 只使用类名选择器
• 没有标签名或id
• 不依赖于页面上的其他块/元素

.block { color: #042; }

Element

命名

元素名可能由拉丁字母、数字、冲号和下划线组成。CSS类是作为块名加上两个下划线加上元素名:.block__elem

HTML

块中的任何DOM节点都可以是一个元素。在给定的块中，所有元素在语义上都是相等的。

<div class="block">
      ...
      <span class="block__elem"></span>
    </div>

CSS

• 只使用类名选择器
• 没有标签名或id
• 不依赖于页面上的其他块/元素

  // Good
  .block__elem { color: #042; }
  // Bad
  .block .block__elem { color: #042; }
  div.block__elem { color: #042; }

Modifier

命名

修饰词的名称可能包括拉丁字母、数字、冲线和下划线。CSS类是由块或元素的名称加上两个字符组成的: .block--mod ，.block__elem--mod ， .block--color-black ， .block--color-red。复杂的修饰符中的空格被dash取代。

HTML

修饰符是一个额外的类名，您可以将它添加到一个block/element DOM节点。添加修饰符类，只对它们修改的块/元素进行修改，并保留原来的类:

// Good
<div class="block block--mod">...</div>
    <div class="block block--size-big
        block--shadow-yes">...</div>
// Bad
<div class="block--mod">...</div>

CSS

使用修饰符类名作为选择器:

.block--hidden { }

根据块级别修改器修改元素:

.block--mod .block__elem { }

元素修饰符:

.block__elem--mod { }

[yangbin1994]

结构化的样式语法比如 less 和 语义化的约定 BEM ，都可以用来描述样式的上下级关系，可以说 less 等高级语言是对 BEM 的替代，但是需要注意查找效率，因此推荐层级不要太深，更有甚者，抛弃 less 的结构化语法（其他的特性比如变量，扩展等没有抛弃=。=），将 less 和 BEM 共用，这也是我现在的做法。

css-module 赋予了样式的作用域概念，试用多人开发和组件开发的项目中。