BEM通过类名硬编码样式作用域并支持精准搜索。必须严格遵循block__element--modifier命名规范，确保块名对应真实DOM节点和文件名，基础类不可缺失，否则导致样式失效和搜索遗漏。
因为BEM把样式影响范围硬编码进类名里，改card__title就只动标题，不会牵连header__title或form__title——作用域不是靠结构猜的，是靠名字写的。
搜索能一次性锁定所有相关代码
BEM类名自带前缀，全局搜search-form__就能同时找出HTML、CSS、JS中所有引用，不用翻DOM树或猜选择器路径。VS Code里用正则search-form__(?!-)还能排除修饰符干扰，精准定位元素级改动。
- 常见错误：写
search-input或searchInput，这类非标准命名会逃过search-form__搜索，导致漏改 - 真实场景：重构时想删掉旧搜索框样式，搜
search-form__发现只有4处引用，确认无误后直接删文件；若用泛命名，可能得grep整个repo找input+search组合
Modifier必须和基础Block共存才生效
button--disabled单独存在是无效的——它只是button的状态补充，不是新组件。JS动态增删class时漏了button，样式就断了，而且你搜button--会以为“已覆盖”，实际线上根本没生效。
- 正确写法：
class="button button--loading"，确保基础类始终存在 - 调试技巧：在DevTools里选中元素，看computed styles是否包含
button对应的规则；若只看到button--loading的声明但没生效，八成是基础类缺失
块名必须对应真实DOM节点
写了user-info__avatar，但HTML里user-info只是个没加class的div，那整个命名链就断了——搜索和重构都会失准。
立即学习“前端免费学习笔记（深入）”；
- Block名必须等于目录名或组件名（
SearchBar.jsx→SearchBar类，不是search或bar） - 禁止跨目录复用Block名：Modal和Toast都用
Dialog作为Block，会导致Dialog__content无法区分归属
真正容易被忽略的是：BEM不防错，只管名字。命名对了，搜索才准；名字断了，整个链路就失效——版本迭代时最怕的不是改不动，而是改了不知道改了哪儿。
