bem能大幅减少!important使用，因其强制单类名选择器（权重恒为0,1,0），依赖声明顺序而非权重竞争，且通过语义化类名隔离作用域、避免嵌套与全局污染。
根本不存在“彻底消除”的魔法，但 BEM 能让 !important 从高频补救手段退化为极少数边界场景的备用选项——前提是严格遵守其类名结构、选择器规则和使用边界。
为什么 .button--disabled 没生效，却总想加 !important
这不是权重不够，而是三件事没对上：button--disabled 类根本没写进 HTML；CSS 文件加载顺序错误（.button--disabled 规则出现在 .button 之前）；或者误用了后代选择器，比如写成 .button .button--disabled —— 这既破坏 BEM 语义，又让两个规则权重同为 0,1,0，纯靠声明顺序决定谁赢。
浏览器匹配 CSS 是从右往左的。.button--disabled 能直接命中元素；而 .button .button--disabled 会让引擎先找所有 .button--disabled，再逐个向上查父节点是否是 .button，结构一动就失效，还多加权重。
- 必须确保 HTML 中同时存在基础类和 Modifier：
class="button button--disabled"✔️，class="button--disabled"❌ - 禁止在 CSS 中用标签强化选择器：
button.button--disabled❌ —— 框架可能用span替换按钮，样式立刻断裂 - Modifier 不是兜底覆盖开关，它只该改
opacity、cursor这类单一状态属性
第三方组件样式冲突时，别硬刚 !important，要隔离
直接写 .ant-btn { border-radius: 0 !important } 等于把你的样式绑死在别人命名上，且无法响应库内部动态类（如 .ant-select-dropdown 是运行时插入的）。
真正有效的做法是用 wrapper block 包一层：<div class="my-form__date-field"><datepicker></datepicker></div>，然后所有定制样式都以前缀限定：
.my-form__date-field .ant-picker-input input { padding: 8px 12px; }
.my-form__date-field :deep(.ant-picker-clear) { right: 32px; }
- 不碰第三方类名，只控制它的父容器和上下文
- Vue 中用
:deep()，CSS Modules 中用:global(.ant-btn)显式穿透 - 禁用全局重置（如
* { box-sizing: border-box; }）对第三方的影响，改为只作用于你的 block：.my-form__date-field * { box-sizing: border-box; }
哪些地方最容易偷偷引入 !important
!important 往往不是明写在你自己的 CSS 文件里，而是藏在动态拼接、第三方库或工具类混用中：
- React/Vue 中手拼类名漏了 Block 前缀，比如写成
className={`btn ${isDisabled ? 'disabled' : ''}`，而正确应是btn--disabled；结果靠.btn.disabled { opacity: .5 !important }救火 - 直接覆盖 Ant Design 类名，而不是包一层
my-form__submit-btn容器做隔离 - 全局工具类（如
u-text-center）误用在 Block 内部结构上，导致和header__title的text-align冲突，最后只能加!important强行赢 - 某些设计系统主题包自带
.theme-dark * { z-index: 0 !important }，这种通配符才是真·杀手，BEM 拦不住，得靠禁用或重写整个主题层
BEM 的核心约束不在命名格式，而在「每个样式只管自己那一块」的契约意识。一旦你开始写 .card .content p 或在 button--disabled 里塞 !important，就等于主动放弃了这个契约——后续所有样式调试，都会变成在一堆不可控的权重和隐式依赖里捞针。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
