bem能大幅减少!important，因其强制单类名选择器使权重恒为0,1,0，靠声明顺序而非权重竞争实现覆盖；修饰符表达状态而非兜底，容器隔离第三方样式，分层设计应对跨组件状态。
直接用 BEM 就能大幅减少 !important，不是靠“压制”，而是让样式优先级天然平权、无需抢。
为什么 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的温床 - BEM 不禁止
.button--primary:hover，但禁止.button .button--primary——后者语义断裂，且 specificity 没真提高 - Vue/React 中即使用了
scoped或 CSS Modules，BEM 类名仍是最佳搭档：编译后变成.button__label[data-v-xxx]，既隔离又可读
.button--disabled 里为什么不能写 !important
修饰符（Modifier）不是兜底覆盖手段，而是表达状态变更。一旦在 .button--disabled 里塞 !important，后续加暗色主题 .theme-dark .button--disabled 就得再加一个 !important，恶性循环立刻开始。
正确做法是靠声明顺序和单一职责：
.button { opacity: 1; }-
.button--disabled { opacity: 0.4; }（不加!important） - 如果
.button--disabled没生效，问题大概率不在权重，而在：类名没写对、CSS 文件没加载、或被 JS 动态移除了 class
第三方组件样式冲突时，别碰 !important
直接覆盖 Ant Design 类名，比如 .el-button { border-radius: 0 !important }，等于放弃维护性。BEM 的解法是用容器做语义隔离：
- 包一层
<div class="my-form__submit-btn"><button></button></div> - 写
.my-form__submit-btn .el-button（配合 CSS Modules 或构建时自动加哈希更稳） - 响应式隐藏导航栏，别写
@media (max-width: 768px) { .nav { display: none !important } }，改用.nav--hidden-mobile，由 JS 或媒体查询切换类名
真正需要更高优先级时，BEM 怎么安全应对
当处理跨组件边界的状态（如全局暗色模式、高对比度访问模式），BEM 不靠 !important，而是分层设计：
- 基础组件样式用最低 specificity：
.button、.button--primary - 状态层挂载在根节点：
，再写html[data-theme="dark"] .button--primary { background: #333; } - 极少数紧急覆盖，用属性选择器替代：
[data-override="button"] .button--primary——比!important更易追踪、更难误用
每次想加 !important 前，先确认：这个样式是否本该由 Modifier 承担？如果不是（比如是内联 style、JS 动态插入、第三方库），就该换控制方式，而不是用 !important 对抗。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
