CSS中的BEM命名

BEM就是三个单词的缩写：Block（模块）、Element（元素）、Modifier（修饰符）

好的css取名规则可以让代码更容易阅读和维护

Block一个独立的实体，代表了更高级别的组件（block）;

Element元素，抽象的说，就是block的后代，也就是子模块，用于形成一个完整的block整体（block__element）;

Modife修饰符，block与element上的标志，用于来表示形容他们的属性、状态、行为等等（block–modifer）。

命名方式：模块名__元素名–修饰器名

优势：
a、识别度高、结构清晰,element 和 modifier 与 block 之间的从属关系，可以从名称上就一目了然的区分
b、隔离性好，每一个区块之间都有是一个独立的空间，减少与其他元素的污染。
c、良好的扩展性，因为modifier修饰符的存在，我们需要去添加别的样式的时候，只需要创建一个新的修饰符就行，例如 .btn-active, .btn-hidden

webpack中开启CSS Modules

借助CSS Modules，可以很方便地自动生成BEM风格的命名