什么时候应该使用CSS!important规则？

CSS 中的 !important 规则使您能够覆盖样式，但是对于一个孤独的软件开发人员来说，这种能力是否太过分了？阅读本文以了解它是什么，以及何时使用它是个好主意！

!important 规则很特别，因为它能够覆盖 CSS 样式的自然级联。

考虑下面的 HTML/CSS 代码……你认为文本会是什么颜色？

<div>
  <h1 id="title">Sir Chompsalot</h1>
</div>

div h1 {
  color: blue !important;
}

div h1 {
  color: green;
}

通常，如果我们有两个具有相同特性的 CSS 规则，则后一个规则会胜出。在这种情况下，前面的 CSS 规则优于后面的任何规则，仅仅是因为它具有强大的 !important 规则。

文字是蓝色的！

使用相同的 HTML 标记，如果我们通过定位 body 标记和 h1#title 来变得更具体怎么办？

div h1 {
  color: blue !important;
}

body div h1#title {
  color: green;
}

这是否有能力覆盖 !important 规则？

没有！哇，!important 规则几乎太强大了。

💪🤖💪

由于 !important 与 CSS 的预期行为相矛盾，因此通常建议避免使用它。如果你过于频繁地依赖 !important 可能会导致很多意想不到的行为，并且新开发人员将很难调试他们的 CSS。为什么这段文字不变色！ 😂

这是否意味着你永远不应该使用它？

自从 !important 被引入 CSS 以来，随着时间的流逝，似乎有一些共识认为它实际上只对一项工作有用：处理外国 CSS 。

外国 CSS 本质上是任何你自己无法直接改变或改进的 CSS。国外 CSS 的两个实际例子是：

JavaScript 框架和外部库：这适用于流行的图书馆，如引导程序，或者标准化 . 由于您不能直接编辑他们的 CSS 样式，有时您唯一的选择是用您自己的 !important 规则覆盖他们的 CSS。
用户风格：这在几年前曾经非常流行。用户样式为您提供了一种创建自己的 CSS 以注入其他人/公司拥有的网站的方法。例如，instagram.com 的这个深色主题

由于您无法更改外国 CSS（除非您在 Instagram 工作以纠正他们严重缺乏暗模式），因此 !important 规则确实是您唯一且最佳的选择。

Mozilla Developer Network 和 CSS-Tricks 的人们似乎同意 !important 确实只对处理外国 CSS 有用

如果您真的很想使用 !important，请尝试反思您可以做出的架构决策。不仅仅是你的 CSS。这可能意味着添加新的 HTML 标记，或应用新的类/ID。参与这种以架构为中心的实践会产生高质量的代码，维护起来很愉快！ 🤓

你有没有找到 !important 的其他合适用途？在 @alligatorio 发推文并与我们分享！