BEM:一套CSS命名的方法论

Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development

什么是BEM？（前端领域）

BEM是Block，Element和Modifier的简称。
Block即块，Element即元素，Modifier即修饰符。
良好的沟通是建立在相同的认知这个基础上的。所以，不要担心看不懂BEM。接下来会对BEM的命名规则进行说明：

Block(块)：有自身意义的一个独立的实体。举个🌰：

Block

根据表达内容(即自身意义上)可以划分为：Header、Container、Footer、LOGO
此时可以定义出以下类选择器名称：header、container、footer、logo
至于Input 和 Button 的划分，放到👇说。

Element(元素)：语义上与块相关，但是自身没有独立含义的块的一部分。接着举🌰：

Element

红色下滑线标注的即为Elements，蓝色的是Elements所属的Block。
MenuItem是Menu的一部分，单独的MenuItem没有独立含义。
Containers 和其中的Pie Graph、Image因为都是具有实意的元素，所以都是Block。
图 Block中的Input 和 Button 也是Element。why？试想，两个元素脱离container且互相独立开后，不难发现，input 和 button 就只剩下其本身的语义对应功能，缺失了自身的实际意义。

Modifier(修饰符)：块或元素上的标识。用于标识表现方式或者行为。举🍐：

Modifier

Search块的背景主题颜色是蓝色，即可以写作search theme blue;
Input元素onfocus时，即可以写作input highlight;
Button元素的处于禁用状态时，即可以写作button disabled。

使用BEM会有哪些好处？

利于CSS代码的维护，使得css结构更更友好、更有意义（熟悉规则之后）

更加官方的解释 http://getbem.com/faq/

BEM的使用规则

Block
- 对象（实际的DOM）
  - 只要接收了一个类选择器的节点都可以是一个Block
- CSS中的应用标准
  - 可以使用拉丁字母，数字和破折号
  - 只使用类选择器，意味着不能有标签选择器和id选择器
  - 同页面中，不依赖其它的Block或者Element

HTML
<div class='block'></div>

CSS
.block{}

👆和官方的示例有些出入，在我的理解中，命名方式其实可以直接合并到CSS的说明中，集合成为一个应用时的规则

Element
- 作用对象
  - Block中的节点都可以作为Element，且这些节点会有相同的上下文语义
- CSS中的应用标准
  - 可以包含拉丁字母，数字、破折号和下划线
  - 由Block的名字加上两个下划线再加上Element的名字组成
  - 其他规则同block中的CSS命名标准一致

HTML
<div class='block'>
...
<div class='block__elem'></div>
</div>

CSS
//good
.block__elem { color: #042; } 
//bad
.block .block__elem { color: #042; }
div.block__elem { color: #042; }

示例中出现了依赖于标签选择器和依赖于其他Block的情况

Modifier
- 作用对象
  - 即可以是Block也可以是Element（目的是通过新增而不是修改原有选择器的方式，来为Block、Element扩展新的样式）
- CSS中的应用标准
  - 由Block的名字或者Element的名字加上两个破折号组成
  - 其他规则同Element中的CSS命名标准一致

HTML
//good
<div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes">
  <div class='block__elem block__elem--mod'>...</div>
</div>
//bad
<div class="block--mod">...</div>

CSS
.block{}
.block--mod {}
.block__elem {}
.block__elem--mod {}
.block--size-big {}
.block--shadow-yes {}

示例中出现了单独用Modifier描述标签的情况。
根据BEM的原则block--mod 应该是对block的补充。
如果想让该Block既保持原有的样式又能有新的样式，只能让
block--mod中增加block的内容，但是这样就会导致，样式之间又变的耦合了。

使用BEM小小实践一下

场景

当前有个页面菜单组件，整体为白色主题，要求鼠标点击过后，菜单子项会有样式变化

分析

菜单即为Block
菜单的子项为Elements
菜单有一个Modifier为 theme white
菜单的子项有一个Modifier 为 active

代码

HTML
<div class='menu menu--theme-white'>
  <div class='menu__item'></div>
  <div class='menu__item'></div>
  <div class='menu__item'></div>
  <div class='menu__item menu__item--active'></div>
</div>

CSS
.menu {}
.menu--theme-white {}
.menu__item {}
.menu__item--active {}

结束语

可以看到，BEM通过描述了一个简单的命名方法，来让代码更加易读、易理解，让协作更加容易。尽管可能在一个大型项目的引入的初期，会给人带来CSS类名冗长的印象，但是我相信最终它会通过这种明确、健壮的命名结构证明自己的价值。
至于在实际项目中如何选择，还是仁者见仁智者见智。毕竟这只一个工具。

本文参考自以下

Get BEM
BEM的定义