关于CSS样式规范问题，BEM的强大之处

1.首先，CSS样式的规范性是大多数实际项目中所必须要求的。就个人经历而言，CSS样式规范化是值得重视的，这样很大成都上避免后期的代码重构。

2.就我个人的实际开发过程中，采用了各种方法来达到CSS样式规范化，但很明显效果都不是特别明显。
  a.常见的就是所谓的驼峰命名
  b.采用模块名为前缀达到区别其他模块，避免重复的效果。

3.后来，接触到BEM的CSS命名规范，才知道有多好用，接下来将重点介绍一下BEM思想。

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。该命名方法使代码更具可读性和可维护性，同时也让CSS类更具有意义。

使用BEM命名规范中常常会出现“–”以及“_”，而通常块连接元素中间使用“”，连接修饰符则使用“–”。

.block{}
.block__element{}
.block--modifier{}

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

之所以使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定，如：

.div-query{}    /*块*/
.div-query__button   /*元素*/
.div-query--valid    /*修饰符*/

BEM最突出的作用是显式的告诉其他开发者某个标记是用来干什么的。通过浏览HTML代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。我们用一个类比/模型来思考一下下面的这些元素是怎么关联的：

.dog{}
.dog__tail{}
.dog--big{}
.dog__tail--long{}
.dog--big__eyes{}

顶级块“dog”，拥有一些其他的元素。例如，“tail”。而块“dog”本身也有一些其他修饰符，如”big“。同时，块”dog“下的元素也有修饰符，如”long“。

如果我们不采用BEM规范来写CSS样式，那么代码将会呈现如下效果：

.dog{}
.tail{}
.big{}
.tail-long{}
.big-eyes{}

这样就使得代码意义不够清晰，这些类之间并没有多大的联系，降低了代码的可读性。

所以，在写CSS样式时采用BEM能够提高编码效率，避免样式重复，互相污染。