BEM能大幅减少!important使用，因其强制单类名选择器使所有样式权重恒为0,1,0，依赖声明顺序而非权重竞争；修饰符表达状态、容器隔离第三方样式、分层设计应对跨组件状态。
直接用 BEM 就能大幅减少优先级冲突，不是靠“压制”，而是让所有选择器权重天然一致、无需竞争。
为什么 BEM 类名一写就少加 !important
BEM 强制只用单个 class 选择器（如 .button__icon--hidden），权重恒为 0,1,0。而传统写法如 .modal .button .icon 权重是 0,3,0，看似更高，但加载顺序一变、文件拆分后，反而容易被后声明的 0,1,0 覆盖——结果开发者第一反应就是加 !important 救火。
- 常见错误现象：
.card .title在 A 页面生效，挪到 B 页面因父容器class名不同就失效 - 审查元素时发现样式被划掉，却找不到是谁覆盖的
- 所有带空格的选择器（如
.form-group .input）都是!important的温床
.button--disabled 里为什么不能写 !important
修饰符（Modifier）不是兜底覆盖手段，而是表达状态变更。一旦在 .button--disabled 里塞 !important，后续加暗色主题 .theme-dark .button--disabled 就得再加一个 !important，恶性循环立刻开始。
- 正确做法是靠声明顺序和单一职责：
.button { opacity: 1; }.button--disabled { opacity: 0.4; }（不加!important） - 如果
.button--disabled没生效，问题大概率不在权重，而在：
— 类名没写对（漏了基础类.button）
— CSS 文件没加载
— 或被 JS 动态移除了class
第三方组件样式冲突时，别碰 !important
直接用 .el-button { border-radius: 0 !important } 覆盖 Ant Design 类名，等于放弃维护性。BEM 的解法是用容器做语义隔离：
立即学习“前端免费学习笔记（深入）”；
- 包一层
<div class="my-form__submit-btn"><Button></Button></div> - 写
.my-form__submit-btn .el-button（配合 CSS Modules 或构建时自动加哈希更稳） - 禁用全局通配规则（如
.theme-dark * { z-index: 0 !important }），它会直接切断 BEM 的 Modifier 覆盖链
多个 Modifier 共存时样式覆盖错乱怎么办
不是 BEM 不支持叠加，而是你让不同语义的 Modifier 去改同一个 CSS 属性。比如 .button--primary 设 background，.button--large 也设 background，后声明的那个必然赢——哪怕它们语义上完全正交。
- 正确做法是让每个
Modifier只管自己那块地：
—.button--primary管颜色
—.button--large管padding和font-size
—.button--disabled管opacity和cursor - 检查所有
Modifier是否重复定义相同 CSS 属性（尤其是background、border、color） - 避免用
Modifier干布局活，例如.button--full-width应改为工具类.w-full或独立布局规则
真正难的不是算权重，而是所有人写的 CSS 都在同一个抽象层级上对话；一旦有人偷偷写 .card .title 或漏掉 Block 前缀，整个平权体系就从内部瓦解。
