什么是BEM
BEM其实是块（block）、元素（element）、修饰符（modifier）的缩写，利用不同的区块，功能以及样式来给元素命名。这三个部分使用__与--连接（这里用两个而不是一个是为了留下用于块儿的命名）。命名约定的模式如下：
.block{}
.block__element{}
.block--modifier{}
- block 代表了更高级别的抽象或组件
- block__element 代表 block 的后代，用于形成一个完整的 block 的整体
- block--modifier代表 block 的不同状态或不同版本(常用作修饰)
BEM的优势
BEM的关键是光凭class名字就可以让其他开发者知道某个标记用来做什么的，明白各个模块之间的关系，例如如下的命名：
.nav{}
.nav__item{}
.nav--blue{}
很明显最顶级块为nav，它有子元素如item，item又有一些属性，例如blue;这样的命名比我们平时的命名优势在于能够一眼看出各个css之间的关系。
再比如一个搜索模块，平时的写法是：
<form class="site-search full">
<input type="text" class="field">
<input type="Submit" value ="Search" class="button">
</form>
BEM的写法为：
<form class="site-search site-search--full">
<input type="text" class="site-search__field">
<input type="Submit" value ="Search" class="site-search__button">
</form>
BEM与SCSS的关系
现在的开发很多时候都会用到SCSS，那么如果使用SCSS的嵌套写BEM规范呢，在SCSS中可以使用@at-root：
.block {
@at-root #{&}__element {
}
@at-root #{&}--modifier {
}
}
/*生成的css*/
.block {
}
.block__element {
}
.block--modifier {
}
非常的方便。
