.button--disabled没生效不是权重不足，而是HTML未加该类、CSS加载顺序错误或误用后代选择器；BEM强制单类名使权重恒为0,1,0，依赖声明顺序决胜；Modifier应表状态而非覆盖，滥用!important将引发维护恶性循环。
为什么 .button--disabled 没生效，却总想加 !important
根本不是权重不够，而是三件事没对上：
• button--disabled 类根本没写进 HTML（JS 拼错、条件漏写、状态未同步）
• CSS 文件加载顺序错误（.button--disabled 规则出现在 .button 之前）
• 误用了后代选择器，比如写成 .button .button--disabled——这既破坏 BEM 语义，又让两个规则权重同为 0,1,0，纯靠声明顺序决定谁赢
BEM 的选择器权重为什么恒为 0,1,0
BEM 不靠“拉平”，而是从源头掐断差异：
• 所有样式必须只用单个 class 选择器，不拼接、不嵌套、不依赖标签或 ID
• ✅ 正确：.button、.button__icon、.button--primary —— 全是 0,1,0
• ❌ 错误：.button span（0,1,1）、#main .button（1,1,0）、.button.is-active（双类名不违规但无增益）
一旦放弃用父级结构“锁住”样式，浏览器就不用比权重，只看谁声明在后——最后声明者胜出，就能稳压那些靠嵌套堆出来的高权重选择器
Modifier 不该是兜底覆盖开关，而应是状态标识
--disabled、--loading 是状态标识，不是强制覆盖手段：
• 一旦你在 .button--disabled 里塞 !important，后续加暗色主题就得写 .theme-dark .button--disabled { color: #fff !important }，再加响应式可能就得三层 !important——恶性循环的起点就是把 modifier 当成“强制覆盖开关”
• 真正该检查的是：.button--disabled 是否排在默认规则之后？HTML 是否真的加了这个类？DevTools 里 computed 值是否来自内联 style 或 JS 注入？第三方库是否用了 [class*="button"] 这类更高 specificity 的属性选择器？
遇到第三方库硬塞 !important 怎么办
别跟着硬刚，BEM 给的是隔离能力，不是对抗能力：
• 别写 .ant-btn { border-radius: 0 !important }——这等于把你的样式绑死在别人命名上，且无法响应库内部动态类（如 .ant-select-dropdown 是运行时插入的）
• 改用容器包裹：<div class="my-form__date-field"><datepicker></datepicker></div>，再写 .my-form__date-field .ant-btn
• 如果对方真用了 !important，你只能也用，但 BEM 能帮你锁死范围：.my-form__date-field .ant-btn--override，而不是全局污染
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的点是：BEM 的约束力完全依赖执行一致性。只要某处写了 .card .card__title 或漏掉基础类名，整个权重模型和作用域隔离就立刻失效——它不防错，只放大人的错误。
