BEM命名法

引言

BEM（Blocks, Elements and Modifiers 块，元素和修饰符），是一种 CSS 类命名规范

内容

Blocks

Blocks：本身有意义的独立实体

Examples
header, container, menu, checkbox, input

Element

Element：Block 的一部分，没有独立的意义并且在语义上与其块相关联

Examples
menu 的 item, list 的 item, checkbox 的 caption, header 的 title

Modifier

Modifier：块或元素上的标志。使用它们来改变外观或行为

Examples
disabled, highlighted, checked, fixed, size big, color yellow

连接

__: 双下划线 B 和 E 连接

menu__item {
}

_：单下划线 B 和 M / E 和 M 连接

menu_active {
}
menu__item_active {
}

-：仅作为英语连字符

mod-menu {
}
mod-menu__item {
}