CSS!important应该在什么情况下使用

仅在两类真实不可绕过情况下可用!important：覆盖第三方内联样式或可访问性兜底。前者因内联样式权重最高，后者限于color、font-size等可读性属性并须用@media或@supports包裹，其余情况均属结构问题。

只在两类真实不可绕过的情况下才该用 !important：覆盖无法修改的第三方内联样式（如 CMS 输出的 style="color:red"），或为可访问性强制兜底（如用户浏览器插件注入的字体放大规则）。

覆盖第三方内联 style 属性时必须用

内联样式天然权重高于任何外部 CSS 选择器，!important 是唯一能压过它的手段。比如 CMS 导出的按钮：<button style="padding: 4px">，你写 .btn { padding: 12px } 完全无效。

1. 必须确认目标是真实内联 style，不是 class 或 data-* 属性模拟的“伪内联”
2. 优先检查是否可通过 JS 移除原 style 属性，比加 !important 更干净
3. 若必须用，注释里得写明来源，例如：/* overrides Shopify product-card inline padding */

可访问性兜底场景下允许用

某些浏览器插件（如 ZoomText、Windows 高对比度模式）会注入带 !important 的用户样式。如果你的组件在这些环境下文字不可读，就得用同等强度对抗——否则用户根本看不见。

1. 仅限 color、background-color、font-size 等直接影响可读性的属性
2. 禁止用于布局类属性（display、flex、position），会破坏语义结构
3. 必须搭配 @media (forced-colors: active) 或 @supports (-ms-high-contrast: active) 条件包裹

其他所有“看起来非用不可”的情况，其实都是结构问题

比如你发现 .header-nav a 被 #app .nav-link 覆盖了，第一反应不该是加 !important，而是：

1. 把选择器改成 .header-nav .nav-link，靠特异性自然胜出
2. 确认自定义 CSS 文件是否在第三方库之后加载（源顺序决定层叠）
3. 用 @layer utilities 显式声明层级，比硬拼权重更可控
4. 检查是否有 scoped 或 Shadow DOM 阻断了样式穿透，该用 :deep() 就别碰 !important

最常被忽略的一点：!important 不是修复工具，是债务凭证。每次使用，都意味着你主动放弃了对层叠路径的控制权——而线上环境里，失控比不生效更难排查。