CSS `!important` 规则

/* 问题示例 */
.button { color: blue !important; }
#submitBtn { color: red !important; }
body .form .button.submit { color: green !important; }
button[type="submit"].submit#submitBtn { color: yellow !important; }

2. 维护困难

/* 很难追踪哪个样式会生效 */
.header { color: black !important; }
.page-header { color: blue !important; }
#main-header { color: red; }
.header.title { color: green !important; }

3. 调试困难

在开发者工具中，很难确定哪个 !important 规则在影响元素。

何时应该使用 !important

1. 工具类/辅助类

/* 工具类应该总是生效 */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.full-width {
    width: 100% !important;
}

2. 覆盖第三方库样式

/* 覆盖 Bootstrap 或其他框架 */
.ant-btn-primary {
    background: #1890ff !important;
}

.material-button {
    box-shadow: none !important;
}

3. 用户样式表

/* 用户自定义样式覆盖网站样式 */
.ad-banner {
    display: none !important;
}

.autoplay-video {
    display: none !important;
}

4. 打印样式

@media print {
    .sidebar, .advertisement, .navigation {
        display: none !important;
    }
    
    * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
}

5. JavaScript 交互状态

/* 重要的状态类 */
.is-hidden {
    display: none !important;
}

.is-visible {
    display: block !important;
}

.has-error {
    border-color: #e53e3e !important;
}

何时应该避免使用 !important

1. 常规样式
2. 组件样式
3. 覆盖自己的样式

替代 !important 的方案

1. 提高选择器特异性

/* 低特异性 */
.button { color: blue; }

/* 更高特异性 */
body .container .button { color: red; }

/* 或使用 ID */
#submit-button { color: green; }

2. 使用相同的选择器但放在后面

/* 后面的规则会覆盖前面的 */
.button { color: blue; }
.button { color: red; } /* 这个生效 */

3. 使用 CSS 自定义属性

:root {
    --button-color: blue;
}

.button {
    color: var(--button-color);
}

/* 轻松覆盖 */
.special-button {
    --button-color: red;
}

4. 使用 CSS 级联层 (@layer)

/* 定义图层优先级 */
@layer base, components, utilities;

@layer base {
    .button { color: blue; }
}

@layer utilities {
    .button { color: red; } /* 这个生效，因为utilities层在后面 */
}

最佳实践

1. 有节制地使用

/* 好的实践 */
.utility-class {
    display: none !important; /* 工具类可以适当使用 */
}

.component-style {
    color: blue; /* 常规样式避免使用 */
}

2. 文档化说明

/* 必须使用 !important 来覆盖第三方库 */
.third-party-override {
    background: red !important; /* 覆盖 Bootstrap 默认样式 */
}

/* 打印样式需要 !important */
@media print {
    .no-print {
        display: none !important; /* 确保打印时隐藏 */
    }
}

3. 使用 CSS 方法论的指导

/* BEM 方法论通常不需要 !important */
.block__element--modifier {
    color: red; /* 高特异性，很少需要 !important */
}

/* 工具类可以使用 !important */
.u-text-center {
    text-align: center !important;
}

.u-hidden {
    display: none !important;
}

4. 调试技巧

在开发者工具中，!important 规则会有一个特殊的标识：

/* 在 Chrome DevTools 中显示为 */
color: red !important; /* 会有 !important 标记 */

现代 CSS 的替代方案

1. CSS 级联层 (Cascade Layers)

@layer base, themes, utilities;

@layer base {
    .button { color: blue; }
}

@layer themes {
    .button { color: red; } /* 这个生效 */
}

@layer utilities {
    .text-red { color: red; }
}

2. :where() 伪类降低特异性

/* 高特异性 */
header nav ul li a { color: blue; }

/* 低特异性 */
:where(header nav ul li) a { color: red; }