B - Block, 模块
,有独立含义的实体
Standalone entity that is meaningful on its own.
例如: header
, container
, menu
, checkbox
, input
E - Element,元素
,模块
的一部分,没有独立的含义,并且在语义上与其 Block 相关联。
A part of a block that has no standalone meaning and is semantically tied to its block.
例如:menu item
, list item
, checkbox caption
, header title
M - Modifier, 变形\特殊化
,块或元素上的标志,用它们来改变外观或行为
A flag on a block or element. Use them to change appearance or behavior.
例如:disabled
, highlighted
, checked
, fixed
, size big
, color yellow
如果感觉不好理解,可以参考阅读BEM 的定义。
下图中,绿色代表 Block
, 蓝色的代表 Element
, 红色的代表 Modifier
。
以中划线连接单词,不论是 Block 还是 Element,如 .logo
.img-slider
使用一个下划线表示 Block 和 ELement 的联系, 如 .logo_img
.img-slider_item
使用两个下划线表示特殊化,如.logo_img__white
表示在 .logo_img
的基础上特殊化
状态类直接使用单词,参考上面的关键词,如 .active
、 .checked
模块采用关键词命名,如.slide, .modal, .tips, .tabs
,特殊化采用上面两个下划线表示,
如.img-slide__full, .modal__pay, .tips__up, .tabs__simple
js操作的类统一加上js-
前缀
不要超过四个class组合使用,如.a.b.c.d