[!info] 关联笔记

• 所属：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

避免：元素再套元素的长链命名争论（团队需约定）。

与其它方案

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

常见误区

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

本节总结

BEM 用可预测命名换低特异性与可维护组件边界。

自测题

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

参考答案

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

延伸阅读

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