为什么要规范css的命名规则？

有团队共同协作开发或者接手过别人项目的人来说，没有命名规范，会出现样式被覆盖，不敢改别人的css。不利于阅读别人的代码。

1.什么是BEM？

是由Yandex团队提出的一种css类名命名方法

B-块（block）、E-元素（element）、M-修饰符（modifier）。

2.BEM命名的好处

1. 适合多前端成员开发使用，css写法规范
2. 适合阅读
3. 适合计算机编程实现

3.命名模式

.block {} // 块，代表.block 代表了更高级别的抽象或组件。
.block__element{} // 元素，代表.block的后代，用于形成一个完整的.block的整体。
.block__modifier{} // 修饰符，代表.block的不同状态或不同版本（hover、active 和 disabled 等）

4.BEM命名规范

1. block-name__element-name--modifier-name，也就是模块名 + 元素名 + 修饰器名

5.注意

命名会很长，不用担心文件体积大的问题，服务器端可以配置gzip压缩，BEM命名相同的部分多，压缩后，体积就不会太大。