BEM能防止意外覆盖，因其将样式归属硬编码进类名（如.card__title），浏览器仅按类名匹配、不依赖DOM位置或嵌套结构；改.card__title只影响带该类的元素，无论其位于页面何处，前提是禁用.card .title等嵌套选择器。
BEM 能防止意外覆盖，是因为它把样式归属直接写进类名里，浏览器只按类名匹配，不看 DOM 位置。 你改 .card__title，就只影响带这个类的元素，哪怕它被塞进 <div id="app"> 最底层，或者挪到弹窗里，样式照样生效——前提是你没写 <code>.card .title 这种嵌套选择器。
为什么嵌套选择器是覆盖源头
传统写法依赖 DOM 层级，比如 .user-card h3 或 .profile .name。这类选择器一动结构就断，而且极易跨组件漏匹配：
- DOM 加个 wrapper，
.user-card h3就失效； - 另一个模块也用了
h3，但没加 BEM 类，它的样式就被连带覆盖； - 第三方库注入的
h3样式，也会被这条规则捕获，造成污染。
BEM 强制只用单类名：.user-card__name，不依赖父级、不猜结构、不靠标签，浏览器匹配时只查这一串字符是否命中。
修饰符必须和基础类共存，否则搜索和覆盖都失效
.button--disabled 单独存在是无效的。它不是新组件，只是 .button 的一种状态补充：
立即学习“前端免费学习笔记（深入）”；
- HTML 里只写
class="button--disabled"，CSS 规则不会生效（因为没定义单独的.button--disabled）； - 搜索
button--看似能定位，但实际线上可能根本没加载基础类，导致样式“消失”； - 正确写法是
class="button button--disabled"，确保作用域上下文完整。
这种契约让所有修改可追溯：全局搜 button 就能一次性看到所有基础类和修饰符使用点，不用翻 DOM 或猜选择器路径。
类名冗余不是问题，而是隔离成本
有人嫌 .search-form__input--disabled 太长，想缩成 .search-input--disabled，这是典型误区：
-
search-form是 block，代表一个完整功能单元；search-input没有语义，无法回答“属于谁”； - 一旦其他模块也叫
search-input，冲突立刻发生； - 构建工具（如 stylelint-selector-bem-pattern）靠三段式结构做正则校验，写错就等于断掉自动化防护。
冗余换来的是可维护性：你删掉 search-form 目录，全局搜 search-form__ 确认无引用，就能放心删 CSS 文件——这在没有 BEM 的项目里几乎不可能。
最容易被忽略的是：BEM 不阻止你写错，它只提供命名框架。真正起作用的是每次加 class 前，你是否真问过自己——“这个样式属于哪个模块？当前是什么状态？会不会在别处意外生效？”
