css BEM

什么是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;
}