BEM命名规范

Block

• 封装一个只对自己有意义的实体。当blocks能够被嵌套而且彼此之间可以交互的时候，语义上他们是等价的；没有层级关系。没有DOM表示的整体实体。（例如控制器和模型也可以是块）
• Naming Block的名字包含拉丁字母，数字和句号。当组合一个完整CSS class的时候，可以增加一个短的前缀：.block
• HTML 任何DOM节点可以作为一个Block，只要它接受一个class名。<div class="block">...</div>
• CSS
• 只使用class名选择器
• 没有标签名和或者id
• 同一页面里，不依赖其它的block或者element
• 例如.block {color:#042;}

Element

• Block的一部分，当把它独立取出来时，没有任何实际意义。任何元素在语义上都是它自己的block紧密相连的。
• Naming Element的名字可能包含拉丁字母，数字，句号以及下划线。CSS class名由block名成加两个下划线再加element的名字，最后组织成一个块名。
• HTML 任何的在Block中的DOM节点，都是一个element。在一个已知的block中，所有的element在语义上都是相等的。

1 <div class="block">
2      <span class="block__name"></span>
3 </div>

• CSS
• 只选择class名字作为选择器
• 没有标签名或者id
• 不依赖当前页面的其它block或者element
  Good

1 .block__elem{color:#042};

Bad

1 .block .block__elem {color:#042;}
2 div.block__elem {color:#042;}

Modifier

• block或者element的flag。使用他们可以改变样式，行为或者是状态。
• Naming Modifier的名字可以包含拉丁字母，数字，句号以及下划线。CSS的class可以由block或者element名称后面加--组成，例如.block--mod或者.block__elem--mod，以及.block--color-black .block--color-red。复杂的modifier里由短线替代空格。
  -HTML Modifier是一个额外的加在block或者element class名之后一个class 名。只为他们负责修改的blocks或者elements添加class，然后保持原有的class不变。
  Good

1 <div class="block block--mod">...</div>
2 <div class="block block--size-big block--shadow-yes">...</div>

Bad

1 <div class="block--mod">...</div>

CSS

• 使用modifier类名作为选择器 .block--hidden { }
• 基于block级的modifier修改元素 .block--mod .block__elem { }
• 元素修改器 .block__elem--mod { }