BEM通过将作用域硬编码进类名（如card__title）实现样式隔离，不依赖DOM嵌套，避免跨组件污染；所有类名带明确前缀，支持精准全局搜索，且modifier必须与基础block类共存才能生效。
因为BEM把样式影响范围硬编码进类名里，改 card__title 就只动标题，不会牵连 header__title 或 form__title —— 作用域不是靠结构猜的，是靠名字写的。
为什么改一个类名不会意外影响其他组件
BEM不依赖DOM嵌套层级，浏览器只认类名是否匹配。只要没写 .card .title 这种嵌套选择器，card__title 的样式就永远只作用于带这个类的元素，不管它被塞进 sidebar、modal 还是独立页面。
- 常见错误现象：
.user-card h3看似只管用户卡片，但一旦在别处也用了h3，又没加 BEM 类，样式就漏过去了 - 真实场景：把
product-card抽成独立 React 组件后，直接挪到搜索结果页，所有样式照常生效，不用修任何 CSS - 参数差异：BEM 类名长度略增，但 gzip 后体积几乎无差别；而嵌套选择器（如
.section .list li a）会拖慢浏览器 CSSOM 构建速度
如何用搜索快速锁定修改影响范围
所有 BEM 类名都带明确前缀，全局搜 card__ 就能一次性找出 HTML、CSS、JS 中所有相关代码，不用翻 DOM 树或猜选择器路径。
- 容易踩的坑：有人写
card-image或cardImage，这类非标准命名会逃过card__搜索，导致漏改 - 使用场景：重构时想删掉旧卡片样式，搜
card__发现只有 3 处引用，确认无误后直接删文件；若用泛命名，可能得 grep 整个 repo 找image+card组合 - 性能提示：VS Code 中用正则搜索
card__(?!-)可排除card--修饰符干扰，更快定位元素级改动
Modifier 必须和基础类共存，否则搜索失效
button--disabled 单独存在是无效的——它只是 button 的状态补充，不是新组件。如果 JS 动态增删 class 时漏了 button，样式就断了，而且你搜 button-- 会以为“已覆盖”，实际线上根本没生效。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：写
class="btn--loading"，但 CSS 规则定义在.btn--loading，而没写.btn基础样式，结果加载态完全不显示 - 正确写法：
class="button button--loading"，确保基础类始终存在，Modifier 才有上下文 - 调试技巧：在 DevTools 里选中元素，看 computed styles 是否包含
button对应的规则；若只看到button--loading的声明但没生效，八成是基础类缺失
真正容易被忽略的是块名必须对应真实 DOM 节点——比如写了 user-info__avatar，但 HTML 里 user-info 只是个没加 class 的 div，那整个命名链就断了，搜索和重构都会失准。
