BEM 命名规范

定义

BEM（Block, Element, Modifier）是一种 CSS 类命名方法论，由俄罗斯公司 Yandex 提出，将界面拆分为块（独立组件）、元素（块的组成部分）与修饰符（状态或变体），并以约定格式命名。

命名格式

• 块：.card；
• 元素：块名加双下划线，如 .card__title；
• 修饰符：块或元素名加双连字符，如 .card--featured、.card__title--large。

设计目标

• 所有样式使用单个类选择器，权重扁平，避免优先级战争；
• 类名自带结构语义，见名知义，便于多人协作与重构；
• 块之间相互独立，可自由移植组合，不依赖标签结构与层级。

评价与现状

批评者认为其类名冗长、书写繁琐。随着 CSS Modules、CSS-in-JS 以作用域隔离解决冲突，以及 Tailwind 等原子化方案流行，严格 BEM 的使用有所减少，但其「组件化拆分与扁平权重」思想仍深刻影响着现代 CSS 工程与各类组件库的类名设计。