BEM
刀刀
0字
0分钟
2026/8/16
官网：BEM 。
CSS 命名十分重要，如有重名，就会发生样式覆盖，导致最终效果显示错乱。对于命名，市面上有一些民间组织指定的命名规则，例如 BEM，SMACSS 和 OOCSS。
CSS BEM 介绍
BEM 命名规则比较常见，其中：
- B 代表
Block块，如header,container,menu,checkbox,input,nav等 。 - E 代表
Element元素，是块的一部分，它没有独立的意义，在语义上与其块绑定在一起。如header title,menu content,nav item等。 - M 代表
Modifier限定，是块或元素上的标志。用它们来改变外表或行为。如nav item active,input focus等。
举例，可以在通常情况下有一个正常的按钮，在不同的情况下有两个状态。使用 BEM 通过类选择器对块进行样式化，所以可以使用任何我们想要的标签( button 、a 甚至 div )来实现它们。命名规则使用 块-元素-标志 的语法。
html
<button class="button">Normal button</button>
<button class="button button-state_success">Success button</button>
<button class="button button-state_danger">Danger button</button>CSS BEM 总结
样式设置方面可以使用 BEM 方法，其中，E 和 M 可以省略。通过该方法可以高效设置类名与方便后续的维护。
贡献者
duyidao 刀刀
平安喜乐