不要再滥用css样式!important规则了

---

theme: channing-cyan

highlight: a11y-dark

不要滥用css样式!important规则

一、理解 !important 与优先级无关

有的同学称 css 的样式优先级计算的例外规则-!important规则，为 css 样式优先级“最高级”， 这其实有点道理，因为从作用结果上看，这似乎符合事实的。不管内联样式， 还是百八十嵌套层的样式选择器组合，都可以被 !important 覆盖。

例如下面这个优先级权重其实已经很高的样式，会轻易被 !important 作用的样式覆盖。

```css .text { color: green !important; }

body #main .box p span { color: red; } ``` 按照下面的这份样式优先级权重规则来看，“body #main .box p span{}” 的优先级权重大约是 0113， 而 ".text{}" 的优先级权重大约是 0010。

• css 延时优先级权重规则说明： 一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

千位： 如果声明在 style 的属性(内联样式)则该位得一分。这样的声明没有选择器，所以它得分总是1000。 百位： 选择器中包含ID选择器则该位得一分。 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。 个位：选择器中包含元素、伪元素选择器则该位得一分。

| 选择器 | 千位 | 百位 | 十位 | 个位 | 优先级 | |--------------|-----|-----|-----|-----|-------| | body p span | 0 | 0 | 0 | 3 | 0003 | | .box | 0 | 0 | 1 | 0 | 0010 | | #main | 0 | 1 | 0 | 0 | 0100 | | 合计 | 0 | 1 | 1 | 3 | 0113 |

| 选择器 | 千位 | 百位 | 十位 | 个位 | 优先级 | |------|-----|-----|-----|-----|-------| | .box | 0 | 0 | 1 | 0 | 0010 | | 合计 | 0 | 0 | 1 | 0 | 0010 |

正如上图所示，结果很显然，应用了 ".text{}" 的样式，文本颜色为 green。 我们要注意，“body #main .box p span{}” 的优先级权重大约是 0113， 而 ".text{}" 的优先级权重大约是 0010，前者的优先级更高，却应用了后者的样式， 这是因为 !important 这个例外规则。注意，从技术上讲，!important 与优先级无关， 所以你要算 !important 的优先级权重是多算？一万？八千？这没法算，它是例外规则，与最终的结果直接相关，但是与优先级无关。

当然，你如果从样式作用结果的角度理解，认为 !important 具有一个很高的样式优先级权重，尽管这个权重值不存在， 但这样理解问题也不大。但说它是样式优先级的例外规则更合适，因为它就是如此设计的。

关于例外规则，这在不合适量化，在某一套计算规则难以算清(难以解释)的场景下，使用例外规则很有好处。

二、什么时候可以使用 !important 规则

tips：css 中使用 !important 的合理场景，是去覆盖糟糕的难以更改的样式。 注意是覆盖，而不是一开始写样式就使用 !important。覆盖+难以更改就是我认为的 !important 的合理适用场景。

例如下面的场景：

1.覆盖内联样式

内联样式的优先级权重很高，如果不便于改动源码中的样式，那么选用 !important 去覆盖掉原来的内联样式是合适的。因为此时，除了改动源码，还有什么合适的办法可以改动内联样式？似乎没有了吧。然后就是关于“不便改动源码”的理解，例如第三方插件的内联样式，这确实不便于改动。如果是自己开发中的项目，那么改动源码可能比起用 !important 去覆盖更合适。对于一些老旧项目里面的内联样式，这种源码是可以动的，但如果你认为“改动源码”非常费劲，你也有一点理由去使用 !important，但不太建议。

2.覆盖优先级很高的选择器

除了内联样式，还有一种需要使用 !important 的场景，那就是样式优先级很高，权重很大的样式。优先级很高，权重很大，是啥概念呢？就是除了改源码(代码)，几乎没有办法能改动了。

```html