基础样式中禁用!important，因其破坏层叠逻辑、污染作用域、引发特异性雪球，并与scoped样式、CSS Modules、Shadow DOM冲突；应改用@layer分层、属性选择器提权等现代方案。
因为!important会直接切断CSS层叠逻辑，让样式失效变得不可预测，尤其在基础样式（如重置、工具类、组件基类）中，它会污染整个样式作用域，后续所有覆盖都只能靠“更狠”的!important硬拼。
基础样式加!important会让后续所有修改都变脆弱
基础样式通常被大量复用，一旦其中某条规则带!important，它就不再遵循“后声明覆盖前声明”或“低权重让位于高权重”的正常逻辑。比如你在全局重置里写了body { margin: 0 !important; }，那么任何组件内部想通过.card { margin: 1rem; }微调边距，都会立刻失效——除非也加!important，或者改用行内样式。
- 工具类（如
text-center、flex）若内部用了!important，Tailwind式原子化组合就彻底崩坏 - 组件库的基类（如
.btn）若定义了display: inline-block !important;，你写.btn--full { display: block; }根本不会生效 - 后续所有修复都只能升级为
!important，形成“特异性雪球”，最终没人敢删旧规则
它和CSS-in-JS、scoped样式、Shadow DOM天然冲突
现代前端框架和构建链路默认隔离样式作用域，而!important强行跨域“越权”，结果往往适得其反：
- Vue SFC 的
<style scoped>中加!important，可能被父组件或全局样式用更高特异性选择器压制，DevTools里显示“已划掉”但找不到来源 - React中CSS Modules生成的哈希类名本意是避免冲突，但
.Button__root_xxx { padding: 8px !important; }反而让父组件无法用普通class覆盖 - Shadow DOM内使用
:host { color: red !important; }，外部my-button::part(label) { color: blue !important; }仍可能因浏览器实现差异而失效
真正该控制的是“谁先加载、谁后覆盖”，不是“谁喊得 louder”
基础样式的核心任务是提供稳定、可预期的起点，而不是靠暴力锁死。现代CSS提供了比!important更干净的替代路径：
立即学习“前端免费学习笔记（深入）”；
- 用
@layer显式排序：@layer reset, base, components, utilities;，把基础重置放最底层，业务样式自动落在上层，无需!important - 用属性选择器提权而不破坏语义：
[data-theme="dark"] .btn比.btn.dark权重高，且不增加额外class - 避免在基础文件里写
!important，只在极少数需覆盖第三方库的@layer overrides块中谨慎使用
最容易被忽略的一点：基础样式里的!important，往往不是为了解决当前问题，而是为了掩盖之前某次随意嵌套或选择器失控留下的烂摊子。它让问题延迟爆发，直到某天一个margin调不对，翻遍DevTools才发现源头在三年前那行*, *::before, *::after { box-sizing: border-box !important; }。
