bem 项目无需 !important，因样式冲突可通过浏览器层叠规则解决，前提是类名正确、加载顺序合理、修饰符归位；所有类选择器权重严格为 0,1,0，杜绝多类名或后代选择器；第三方库冲突应通过容器封装隔离，而非硬刚 !important。
为什么 BEM 项目里根本不需要 !important
因为所有样式冲突都能靠浏览器原生层叠规则解决，前提是类名写对、加载顺序合理、修饰符归位。你看到的 .button--disabled 没生效，99% 不是权重不够，而是：
• HTML 元素上压根没加这个类（比如 JS 写成 className="button disabled" 而不是 button--disabled）
• CSS 文件引入顺序反了——.button--disabled 规则被提前加载，后声明的默认 .button 反而覆盖了它
• 误用了后代选择器，比如写了 .button .button--disabled，语义断裂且 specificity 还是 0,1,0，纯靠顺序决定胜负
如何让所有 BEM 类名权重严格一致（全是 0,1,0）
BEM 不靠“拉平权重”，而是从源头杜绝差异。核心就一条：所有样式必须只用单个 class 选择器。
✅ 正确：.button、.button__icon、.button--primary —— 权重全是 0,1,0
❌ 错误：.button span（权重 0,1,1）、#main .button（权重 1,1,0）、.button.is-active（双类名不违反 BEM，但破坏单一职责，且无实际增益）
⚠️ 注意：:is() 或 :where() 不能替代 BEM——它们不约束结构，:is(.header .nav a) 依然带出高权重，调试时更难定位
遇到第三方库硬塞 !important 怎么办
别跟它硬刚，BEM 给你的是隔离能力，不是对抗能力：
• 别写 .ant-btn { border-radius: 0 !important }——这等于把你的样式绑死在第三方命名上
• 改用容器包裹：<div class="my-form__submit-wrapper"><button></button></div>，再写 .my-form__submit-wrapper .ant-btn（配合 CSS Modules 或构建哈希确保作用域不泄漏）
• 如果对方真用了 !important，你只能也用——但 BEM 结构能帮你锁死范围：.my-form__submit-wrapper .ant-btn--override，而不是全局污染
真正容易被忽略的点
BEM 的威力不在命名本身，而在它迫使你把“状态”和“结构”分开思考。比如 .button--loading 是状态，.button__spinner 是结构，二者互不干扰。一旦你在 modifier 里塞 !important，后续想加暗色主题或可访问性模式，就得再叠一层 !important，恶性循环就此开始。问题从来不在 CSS 规则写得不够狠，而在 HTML 类名拼错了、CSS 加载顺序乱了、或者把修饰符当成了兜底覆盖手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
