!important会破坏层叠可预测性，导致维护混乱；它将声明提至最高优先级（仅次于用户强制样式），多处使用时需回退比权重，反而更难理清；还无法被JavaScript内联样式覆盖。
为什么 !important 不能乱加
它会破坏样式层叠的可预测性，让后续维护变成“谁最后加 !important 谁赢”。浏览器按“来源 → 重要性 → 优先级 → 顺序”逐级比对，!important 直接把当前声明提到最高优先级（仅次于用户强制样式），一旦多个规则都带它，又得回退到选择器权重比较——反而更难理清。
实际项目中常见错误：
- 在组件 CSS 里给每个
color、margin都加!important，结果全局主题色改不了 - 第三方 UI 库已用
!important，你再加，等于白加（权重相同，后定义胜出） -
!important无法被 JavaScript 的element.style.xxx覆盖（内联样式本该最高，但加了!important的 CSS 规则仍更高）
怎么算准选择器权重：不是“类多就赢”
权重是四位数（a,b,c,d），分别对应：内联样式 / ID / 类/属性/伪类 / 元素/伪元素。注意：它不是十进制数，0,1,0,0（一个 ID）永远大于 0,0,99,99（99 个 class）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免用
div#header.nav.active > ul li a:hover这种“堆砌型”选择器——ID 已够用，后面加一堆类反而增加维护成本 - 用 BEM 命名（如
menu__item--active）能天然控制 class 数量，也方便团队协作时预估权重 - 检查权重冲突最直接的方式：打开 Chrome DevTools → Elements 面板 → 看 Styles 右侧的“小箭头”，点击可展开计算过程
用 [data-theme] 或 :where() 主动降权
当必须覆盖第三方样式（比如 Ant Design 的按钮），硬拼权重容易失控，不如主动“示弱”再精准覆盖。
推荐两种方式：
- 用属性选择器开头降低整体权重：
[data-theme="dark"] .ant-btn比.dark-theme .ant-btn权重更低（前者 c=1，后者 c=2），但语义更清晰，也方便 JS 切换 - CSS Nesting +
:where()（现代浏览器支持）：:where(.ant-btn) { color: red; }——:where()内的选择器不参与权重计算，彻底规避冲突 - 慎用
* {}或body * {}，它们权重虽低，但匹配开销大，且易误伤
引入顺序和 @layer 的真实作用
CSS 文件加载顺序决定“同权重下谁生效”，但这只是最后一道防线。很多人以为把自定义样式放最后就能覆盖，却忽略了 Webpack/Vite 的 CSS 提取插件可能打乱顺序，或 @import 在媒体查询内导致解析时机不同。
@layer 是目前最可控的方案：
- 声明层级：
@layer base, components, utilities; - 导入时指定归属：
@layer components { .btn { ... } } - 同层内按书写顺序覆盖，跨层则 layer 声明顺序优先（
base最底层，utilities最顶层） - 注意：未显式归入
@layer的样式默认在“anonymous layer”，它比所有命名 layer 都低——所以第三方样式不加@layer反而是好事
真正麻烦的是那些动态插入的 style 标签（比如某些 UI 库运行时注入），它们不在构建流程里，@layer 也管不到——这时候只能靠更高权重的选择器或属性选择器兜底。
