什么是BEM?
BlockElementModifier其实是块（block）、元素（element）、修饰符（modifier）。
这三个部分使用__ 与--连接
(为了于_和-区分：CSS 类名的单词连字符选用下划线还是横杠？请参考：https://blog.csdn.net/risingwonderland/article/details/25308037)
.块__元素--修饰符{}
-
block代表了更高级别的抽象或组件 -
block__element代表 block 的后代，用于形成一个完整的 block 的整体 -
block--modifier代表 block 的不同状态或不同版本
为什么使用BEM？
1.性能
CSS引擎查找样式表，对每条规则都按从右到左的顺序去匹配
以下这段代码看起来很快，实际上很慢。
通常我们会认为浏览器是这样工作的：找到唯一ID元素ul-id —> 把样式应用到li元素上。
事实上: 从右到左进行匹配，遍历页面上每个li元素并确定其父元素
#ul-id li {}
所以不要让你的css超过三层
2.语义化
看以下例子是否一目了然。
.person{} /*人*/
.person__hand{} /*人的手*/
.person--female{} /*女人*/
.person--female__hand{} /*女人的手*/
.person__hand--left{} /*人的左手*/
如果写成以下这样，你将不知道这是hand指的是手还是指针，female是女性还是雌性，female-hand是女性还是雌性的手？left-hand什么的左手，还是指针的左边？
.person{}
.hand{}
.female{}
.female-hand{}
.left-hand{}
在scss中如何使用？
使用@at-root内联选择器模式，编译出来的CSS无任何嵌套（这是关键）
.person {
@at-root #{&}__hand {
color: red;
@at-root #{&}--left {
color: yellow;
}
}
@at-root #{&}--female {
color: blue;
@at-root #{&}__hand {
color: green;
}
}
}
/*生成的css*/
.person__hand {
color: red;
}
.person__hand--left {
color: yellow;
}
.person--female{
color: blue;
}
.person--female__hand {
color: green;
}
