整理自:前端早读课【第1183期】这些 CSS 命名规范,将省下你大把调试时间
试图解决 3 类问题:
仅从名字就能知道一个 CSS 选择器具体做什么
从名字能大致清楚一个选择器可以在哪里使用
从 CSS 类的名称可以看出它们之间的联系
不知你是否见过这样的类名:
.nav--secondary {
...
}
.nav__header {
...
}
这就是 BEM 命名规范。
这个火柴人代表了一个组件,比如说一个设计区块。
BEM 这里的 B 意为『区块』('Block')。
在实际中,这里『区块』可以表示一个网站导航、页眉、页脚或者其他一些设计区块。
根据上述解释,那么这个组件的理想类名称即是 stick-man。
组件的样式应写成这样:
.stick-man {
}