BEM能缓解CSS组件样式耦合，因为它强制样式归属锁定到具体组件层级，不依赖DOM结构深度或父级类名，通过全局唯一的Block名、专属Element和布尔态Modifier切断选择器对上下文的隐式依赖。
为什么BEM能缓解CSS组件样式耦合
因为BEM强制把样式归属锁定到具体组件层级，不依赖DOM结构深度或父级类名。传统写法里 .card .title 一旦父容器类名变、嵌套顺序调换、甚至只是加了个 div 包裹，样式就失效或误命中；而BEM的 .card__title 是独立原子类，只和组件自身语义绑定，移动位置、复用到别处都不影响。
关键不是“多写了下划线”，而是它切断了选择器对上下文的隐式依赖。你改 .user-card 的结构，只要不改自己的 __header 或 --disabled 修饰符，其他地方用到的 .user-card__header 就不会意外被波及。
BEM命名必须守住的三条线
很多人写成 .button__icon--large 却在另一个组件里也定义了同名 .button__icon，结果样式互相覆盖——这不是BEM的问题，是没守规矩：
-
Block名必须全局唯一（如search-form，不能叫form） -
Element只能属于且仅属于一个Block（.modal__close不能同时被dialog和notification复用） -
Modifier必须是布尔态或有限枚举（--size-small可以，--width-240px不行；后者该抽成独立Element或用 CSS 自定义属性）
和CSS-in-JS或Shadow DOM比，BEM的现实优势在哪
它不侵入构建链路，不增加运行时开销，老项目一天就能落地。但要注意两个硬约束：
立即学习“前端免费学习笔记（深入）”；
- 不能靠
:host或css modules的局部化机制来“补BEM没做好的事”——比如用composes混入另一个Block的样式，等于又绕回耦合 - 伪类和响应式需显式写进BEM类名里：
.button--hovered而非.button:hover；.card--sm-up而非媒体查询内嵌——否则组件挪到新环境，交互或断点逻辑就丢了 - 第三方UI库（如Ant Design）的类名不要强行BEM化，用 wrapper class 隔离更稳妥，例如
<div class="profile-card"><div class="ant-card">…</div></div>，然后只给.profile-card写BEM规则
遇到嵌套深的组件怎么拆BEM块
看到 article > header > h1 + p > span.date 这种结构，别一股脑全塞进 article__header__title__date——BEM禁止元素嵌套元素。正确做法是分层识别语义边界：
-
article是顶级 Block -
article__header是它的 Element -
date如果只在 header 里出现且无独立行为，就是article__date（平级 Element）；如果它还会单独出现在 footer 或 sidebar，就该升为独立 Block：time-display - 绝对避免
article__header__date或article__date--in-header这类写法
真正难的不是写对名字，是每次加一个新类前，得停下来问一句：这个样式，离开当前组件的业务语义，还成立吗？
