CSS命名规范之BEM-源自Yandex的CSS命名方法论
BEM即块(Block)、元素(Element)、修饰符(modifier)，是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。BEM命名约定更加严格，而且包含更多的信息，一般用于团队开发一个耗时的大项目中。我们常见的BEM命名方式一般都是经过改良的，本文介绍的是Nicolas Gallagher（Twitter前端工程师）的改进版。命名约定的格式如下：
.block{ ... } /* 代表更高级别的抽象或组件 */
.block__element{ ... } /* 代表.block的后代，用于形成一个完整的block整体 */
.block--modifier{ ... } /* 代表block的不同状态或不同版本 */
之所以使用两个连字符和下划线而不是一个，是为了让自己定义的块可以用单个连字符来界定，如：
.myHeader-search{ ... } /* 自定义的某个块 */
.myHeader-search__textElement{ ... } /* 自定义块中的textElement元素 */
.myHeader-search--full{ ... } /* 自定义块中的full修饰符 */
BEM的关键在于，光凭名字就可以告诉其他开发者某个标记(class)是用来干什么的。通过直观地阅读class属性，我们就能明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者元素，还有一些是组件其他形态或者是修饰符。我们通过下面的示例来进一步说明：
<!-- 假设有个组件Person -->
<div class="Person">
<!-- hand是子元素，left、male是状态或修饰符：左、男性，即男性的左手-->
<div class="hand left male"></div>
<!-- 女性的右手 -->
<div class="hand right female"></div>
</div>
上面的代码使用了常规CSS来表示，各个class都是有意义的，但是他们之间却是脱节的，拿female来说，是指女性人类还是指某种雌性的动物？hand是在表示指针（英文hand有钟表指针的含义）还是一只正在玩指纸牌的手呢？使用BEM我们可以获得更多的描述和更加清晰的结构，并且通过命名我们就可以知道元素之间的关联。代码如下：
<!-- 使用BEM命名 -->
<div class="Person">
<!-- 女性人类的手 -->
<div class="Person__hand--female"></div>
<!-- 人类的左手 -->
<div class="Person_hand--left"></div>
</div>
再看一个常规方式命名的例子：
<!-- 搜索表单，full表示当前状态 -->
<form class="site-search full">
<input type="text" class="field" />
<input type="submit" class="button" value="搜索" />
</form>
上面的命名不好的地方就在于名称不够精确，不能告诉我们足够的信息。尽管我们可以用它们完成工作，但它们确实非常含糊不清，不够优雅。使用BEM记号法后就是下面的代码：
<!-- 状态或修饰符使用两个横线（--） -->
<form class="site-search site-search--full">
<!-- 模块下的元素使用两个下划线（__） -->
<input type="text" class="site-search__field"/>
<input type="submit" class="site-search__button" value="搜索" />
</form>
在上面的代码中，我们可以清晰地看到有个叫.site-search的块，内部有个叫做.site-search__field的元素，并且site-search还有另一种形态叫做.site-search–full。通常人们会认为BEM这种写法难看。但是，如果仅仅认为这种写法看上去不怎么好看而羞于使用，那么我们将错失最重要的东西。BEM看上去有些怪怪的，但是它的好处远远超过外观上的瑕疵BEM有可能导致输入更长的文本，但是大部分编辑器都有代码自动补全的功能，而且gzip压缩将会让我们消除对文件体积的担忧
更多干货笔记关注微信公众号 : 老九学堂