BEM学习小结

BEM顾名思义是由块（Block）、元素（Element）和修饰符（Modifier）这三个不同组成的。

1）块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的；

2）元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素；

3）修饰符是改变某个块的外观的标志。

---

目前来说，比较流行的是由 Harry Roberts 提出的命名规范，该命名规则的原则如下：

1）BEM 实体名称全部是小写字母或数字。名称中的不同单词用单个连字符（-）分隔。

2）BEM 元素名称和块名称之间通过两个下划线（__）分隔。

3）布尔修饰符和其所修饰的实体名称之间通过两个连字符（--）来分隔。不使用名值对修饰符。

让我们来看几个BEM的例子：

.person{}

.person__hand{}

.person--female{}

.person--female__hand{}

.person__hand--left{}

顶级块是"person"，它拥有一些元素，如"hand"。一个人也会有其他形态，比如女性"female"，这种形态进而也会拥有它自己的元素。

一个head模块可以包含多个块，如 logo块（logo）、搜索模块（search-form）、导航模块（menu）。其中搜索模块又有两个元素，输入框（search-form__input）和按钮（search-form__btn）；这时候如果搜索模块的按钮需要一个禁止点击的行为状态，那还可以通过修饰符来表现命名比如：search-form__btn--disabled。

那从上面的例子我们就可以很清楚的看出来采用BEM命名规范有几个好处：

1）首先是命名识别度高，结构清晰。element 和 modifier 与 block 之间的从属关系，可以从名称上就一目了然的区分。

2）其次，命名隔离性好。每一个 Block 都有一个独立的空间，很好的控制了对其他元素的污染。

3）再次，良好的扩展性。如果新的 block 只是和原来的 block 有不同的皮肤颜色或者状态，那么，只需要再创建一个新的 modifier。