css命名规范： BEM 的命名法

 

整理自：前端早读课【第1183期】这些 CSS 命名规范，将省下你大把调试时间

试图解决 3 类问题：

仅从名字就能知道一个 CSS 选择器具体做什么

从名字能大致清楚一个选择器可以在哪里使用

从 CSS 类的名称可以看出它们之间的联系

不知你是否见过这样的类名：

.nav--secondary {
...
}
.nav__header {
...
}

 

这就是 BEM 命名规范。

这个火柴人代表了一个组件，比如说一个设计区块。

BEM 这里的 B 意为『区块』（'Block'）。

在实际中，这里『区块』可以表示一个网站导航、页眉、页脚或者其他一些设计区块。

根据上述解释，那么这个组件的理想类名称即是 stick-man。

组件的样式应写成这样：

.stick-man {
}