css命名规范: BEM 的命名法

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

试图解决 3 类问题:

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

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

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

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

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

这就是 BEM 命名规范。

css命名规范: BEM 的命名法

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

BEM 这里的 B 意为『区块』('Block')。

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

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

组件的样式应写成这样:

.stick-man {
}

css命名规范: BEM 的命名法

css命名规范: BEM 的命名法

css命名规范: BEM 的命名法

css命名规范: BEM 的命名法

css命名规范: BEM 的命名法

css命名规范: BEM 的命名法

上一篇:webstorm2017破解


下一篇:c++11 stl 学习之 shared_ptr