CSS命名规范—BEM

背景：
最近上了一个前端项目，技术栈是angular + ionic。
在听别的前端人员讨论的时候听到一个词叫BEM，当时听不懂，所以才有了这篇文章，适合前端初学者。

BEM是什么

BEM指的谁块（Block）、元素（Element）、修饰符（modifier），它是Yandex团队提出的一种前端命名方法论，可以让你的CSS类对别的开发人员来说更加有意义，能够一看类名就知道对应的内容。

Block指的是被划分的一个独立的模块,例如一个header或者footer是block，header里面的搜索框也可以是block。

Modifier代表的是状态，例如原来写CSS中的 .current .active 等状态

BEM 最多只有 B+E+M 三级。

现在的所说的BEM有很多种，很多在原始的版本以上已经修改过，但是原则还是一样的。“用它的思想，不一定要用它的命名方式”这句话就很有道理。

某一种BEM的例子

基本规则：

.block{}  /*代表了更高级别的抽象或组件*/
.block__element{}  /*代表.block的后代，用于形成一个完整的.block的整体*/
.block--modifier{}  /*代表.block的不同状态或不同版本。*/

上面的规则用的是两个“-”或者两个“_”是因为想让你块（block）可以用单个连字符来界定。例如：

.site-search{} /* 块 */  
.site-search__field{} /* 元素 */  
.site-search--full{} /* 修饰符 */    

实践经验

在项目上，并不是说所有的CSS class都要用BEM来命名，我们只在需要用到BEM的时候才使用它，这个说法比较抽象。举个例子，一个网站会有很多logo，logo会放在各个地方，所以不适合写一个类似于 .header__logo这样的class，只有在明确某个内容一定是另外一个内容的后代，才会用上BEM。

更多的经验可能需要积累，就自然而然的知道什么时候使用它了，目前只要知道BEM是什么，怎么用，大概什么时候用就够了。

参考文章
CSS命名规范——BEM思想
理解CSS命名规范--BEM