Blocks, Elements and Modifiers,是一种 CSS 命名规范

Block

封装一个本身有意义的独立实体。如:
header

Element

块的一部分,没有独立的意义,任何元素在语义上都与其块相关联。如:
header title

Modifier

块或元素上的标志,用它们来改变外观、行为或状态。如:
disabledhighlightedsize big

Block 和 Element 之间用双下划线 __ 连接
Modifier 前面用双短横线 -- 连接

示例:

.form {}
.form__submit {}
.form__submit--disabled {}
.form--simple {}

好处

  • 模块化
  • 结构化
  • 可复用

BEM — Block Element Modifier (getbem.com)