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