CSS 中的 BEM 规范

BEM 规范

BEM 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。

规范默认有以下的几个约定：

• - 中划线：仅作为连字符使用
• -- 双中划线：表示不同状态或不同版本
• __ 双下划线：双下划线用来连接块和块的子元素

.block {
   }
.block__element {
   }
.block--modifier{
   }

其中

• .block 代表了更高级别的抽象或组件。
• .block__element 代表.block的后代，用于形成一个完整的.block的整体。
• .block–modifier代表.block