使用BEM命名规范来组织CSS代码

BEM是Block（块）Element（元素）Modifier（修饰器）的简称

使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长）

如何使用BEM

一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block）

属于块的某部分，可作为一个元素（Element）

用于修饰块或元素，体现出外形行为状态等特征的，可作为一个修饰器（Modifier）

在本规范中，以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为块和修饰器 或 元素和修饰器的间隔，以中划线 - 来作为块|元素|修饰器 名称中多个单词的间隔

保证各个部分只有一级 B__E_M，修饰器需要和对应的块或元素一起使用，避免单独使用

在样式文件中，仅以类名作为选择器，不使用ID或标签名来约束选择器，且CSS（或者SCSS编译后的CSS）中的选择器嵌套不超过2层，增加效率和复用性，减少选择器之间的耦合度

比较常见的嵌套情景：需要通过块状态对内部元素进行调整时

而在SASS文件中，也需要注意嵌套层次的意义，尽量按照 BEM三层来

BEM 规范虽然结构比较清晰，但有时候会产生代码冗余。

为避免写太多重复性的代码，我们要学会善于利用预编译语言的（适当地使用@include@extend等）