BEM 命名规范

用 Block-Element-Modifier 降低选择器耦合与特异性，建立可协作的 CSS 命名合同。

#concept #growing #frontend #css

[!info] related notes

所属：CSS 工程化 MOC

相关：特异性 · CSS Modules · Tailwind

BEM 命名规范

这个概念为什么出现

全局 CSS 最大的敌人是名字冲突与选择器耦合：.header .list .item.active 既脆又高特异性。BEM 用命名约定把组件边界说清楚。

[!abstract] 一句话理解 block__element--modifier：块、元素、修饰符三层命名，让样式依赖变显式、扁平。

最小示例

场景：库存卡片

<article class="sku-card sku-card--warning">
  <h2 class="sku-card__title">SKU-42</h2>
  <p class="sku-card__stock">剩余 3</p>
  <button class="sku-card__action" type="button">补货</button>
</article>

.sku-card { border: 1px solid #e2e8f0; padding: 16px; }
.sku-card--warning { border-color: #f59e0b; }
.sku-card__title { font-size: 1rem; }
.sku-card__action { margin-top: 8px; }

核心规则

Block：独立组件 sku-card
Element：块的子部分 sku-card__title
Modifier：状态/变体 sku-card--warning

Element 的命名表达其属于哪个 Block，不要求照搬 DOM 嵌套层次。Modifier 与基础类一起使用，例如 sku-card sku-card--warning，以保留基础样式。

与其它方案

方案	关系
CSS Modules	用局部作用域解决冲突，仍可在模块内用 BEM 思维
Tailwind	用 utility 降低自定义命名；组件层仍需结构命名
工具类混用	可以，但要约定边界

常见误区

[!warning] 常见误区：BEM 是视觉类名生成器它是依赖管理策略，不是把所有 div 改名。

本节总结

BEM 用可预测命名表达组件边界。低特异性来自配套的单类选择器写法；仅采用 BEM 名称、同时堆叠多层选择器，并不会自动降低特异性。

自测题

为什么 BEM 偏好单类选择器？

参考答案

降低特异性与耦合，方便修饰符覆盖与删除。

延伸阅读

资料	类型	支撑内容
getbem.com	文档	方法