前言

在近期公司的项目合作中存在代码风格不一致的现象，一个团队合作上效率要提升，首先得统一战线，那么这个统一战线其实就是规范和风格首先得一致。

什么是 BEM 命名规范

Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。

BEM 命名规范解决了什么？

1、代码复用；

2、在维护代码的时候，怎么减少复杂度及简单地重构；

3、减少命名冲突。

4、结构清晰易懂。

谈谈Block

Block是BEM的基础的，因为你可以理解BEM里面所说的一个组件就是一个Block，它是一个你以后可以重用的单元！

特点：Block的取名（名字）应该描述的是你这个组件是什么，而不是描述它像什么！

	<button class="error"></button>

	<button class="red-btn"></button>

就好像上面这段代码，error 和 red-btn，red-btn 只是元素描述一个外观，当它里面存在子元素的时候，其实你就很难去再给它命名，比如这里面存在一个span，里面写的是描述的话，那这里你总不能叫red-btn__text

Error在这里能表示的含义就会更广一些，error我们首先联想到这个单词的含义是错误，错误一定是要让人知道，于是有更深一层的含义就是显眼，那么从显眼我们又能联想到红色加粗，抓人眼球，那如果这时候里面有个提示语，我们就可以很快的给他定义error__text。

Block的另外一个特点就是它是可嵌套，很多时候布局其实是复杂，就好像表单里面有输入框，折叠面板里面有列表, 按钮里面有图标，表格里面有下拉菜单或者按钮,那这个按钮其实不是表格或者表单独有，它其实是在项目中多处存在的。

谈谈Element

Element其实就是Block的一部分，并且不能离开Block单独使用。

Element的取名（名字）应该描述它的目标，而不是描述它的外貌；

Element的取名应该保持这种格式——block-name__element-name，element的名字应该跟他的block名字以双划线“__”连接起来。

这里我们可以看回刚刚的error，error里面的error__text 突出的特点是红色加粗，这是它在error这个块下所赋予它的特性，如果你把它加在info或者是primary下可能就失去了它的本来含义。什么叫描述它的目标而不是外观呢？其实就是在某个块下面的元素，它是什么，而不是根据它下面的元素长什么样给它命名。

    .button__icon {} .button__text {}

什么时候该建立一个Block或者一个Element?

1、如果一个元素将来需要复用，并且不依赖其它，那么这个时候就应该建立一个Block。 2、那么如果一个元素需要它的父元素类名带给他含义，或者它本身就是父元素的一部分，就比如按钮的里面的文本，或者是分页上的页码块，它独立出来的意义不大，那么它就应该是个元素。

谈谈Modifier

Modifier主要定义了Block或者Element的状态、外观等“附加”的样式！

Modifier的取名描述了组件的外观（比如尺寸或者形状、激活状态之类的），但是需要注意的是一切改动都是非侵入性的；

Modifieer的名字应该跟Block名字或者Element名字以“--”连接。

<button type="button" class="el-button el-button--error">
    <span>危险按钮</span>
</button>
<button type="button" class="el-button el-button--danger is-circle">
    <i class="el-icon-delete"></i>
 </button>

这里借用element的button组件代码，可以更清除地看到el-button定义了按钮的公共外观，之后如果需要表示该按钮存在的风险的时候使用--error进行修饰，但是因为圆形不属于危险的含义之中，于是又有另外一个类名去进行修改。这里的is-也是一种命名空间风格，代表处于什么状态下，也可以算上是Modifier的一种，特殊的一种。

总结

关于css命名风格-bem 我也是在摸索阶段，如果哪里有错误的认识，也请大家可以指出错误，一起探讨，共同学习。