企业开发团队分享，BEM 代码命名规范实践

背景

最近老大在维护别人的代码时，发现我们团队写的样式各有种的想法及风格，这在后续维护会增加一定的难度，所以老大决定统一样式的会名规范，所以就安排我去调研及实践，下面是我调研的结果。

什么是 BEM 命名规范

BEM 由 Yandex 团队提出的一种前端 CSS 命名方法论。BEM 是 BlockElementModifier 的缩写 ，其中B 表示块（block）、E 表示元素（element）、M 表示修饰符（modifier）。

这三个部分通常使用__ 与--连接。即： .块__元素--修饰符{}

• Block：代表了一个独立的块级元素，可以理解为功能组件块。一个 Block 就是一个独立的区块，比如头部是个 block,表单功能输入框是一个block，block可大可小。
• Element：是 Block 的一部分不能独立来使用的，所有的 Element 都是与 Block 紧密关联的。例如一个带有 icon 的输入框，那么 这个 icon 就是这个输入框 Block 的一个 Element，脱离了输入框的 Block 那么这个 icon 就没有意义。
• Modifier：是用来修饰 Block 或 Element，表示 block 或者 element 在外观或行为上的改变。例如，上面提到的输入框 Block，当鼠标悬停时边框高亮，那么这个高亮的效果就应该用 Modifier 来实现。

上图绿色表 block， 蓝色表示 element ， 红色表示 modifier。

为什么要用 BEM?

性能

CSS 引擎查找样式表，对每条规则都按从右到左的顺序去匹配，以下这段代码看起来很快，实际上很慢。通常我们会认为浏览器是这样工作的：找到唯一ID元素ul-id —> 把样式应用到li元素上。

事实上: 从右到左进行匹配，遍历页面上每个 li元素并确定其父元素

#ul-id li {}

所以不要让你的css超过三层。

语义化

BEM 的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。 通过浏览HTML代码中的class属性，你就能够明白模块