.buttton--disabled没生效并非权重不足，而是html未添加该类、css加载顺序错误或误用后代选择器（如.button .button--disabled），导致规则失效；bem强制单类名选择器使所有样式权重恒为0,1,0，依赖“最后声明者胜出”而非权重竞争。
为什么 .button--disabled 没生效，却总想加 !important
根本不是权重不够，而是三件事没对上：HTML 上压根没加上 button--disabled 这个类名（JS 拼错、条件漏写）；CSS 文件加载顺序反了（.button--disabled 规则在 .button 之前被引入）；或者误写了后代选择器，比如 .button .button--disabled——这既破坏语义，又让两个规则权重相同（都是 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（双类名不违规但无增益）
一旦你放弃用父级结构“锁住”样式，浏览器就不用比权重，只看谁声明在后——最后声明者胜出这条简单规则，就能稳压那些靠嵌套堆出来的高权重选择器。
遇到第三方库硬塞 !important 怎么办
别跟着硬刚，BEM 给的是隔离能力，不是对抗能力：
- 别写
.ant-btn { border-radius: 0 !important }—— 这等于把你的样式绑死在别人命名上 - 改用容器包裹：
<div class="my-form__submit-wrapper"><button></button></div>，再写.my-form__submit-wrapper .ant-btn - 如果对方真用了
!important，你只能也用，但 BEM 能帮你锁死范围：.my-form__submit-wrapper .ant-btn--override，而不是全局污染
Modifier 里为什么不能加 !important
--disabled、--loading 是状态标识，不是兜底覆盖手段。一旦你在 .button--disabled 里塞 !important，后续加暗色主题时就得写 .theme-dark .button--disabled { ... !important }，再加响应式就得三层 !important——恶性循环的起点，就是把 modifier 当成“强制覆盖开关”。
真正该检查的是：.button--disabled 是否排在默认规则之后？HTML 是否真的加了这个类？DevTools 里 computed 值是否来自内联 style 或 JS 注入？第三方库是否用了 [class*="button"] 这类更高 specificity 的属性选择器？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
