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

The !important rule in CSS gives you the ability to override styles, but is this power too much for a lone software developer? Read this article to find out what it is, and when it’s a good idea to use it!

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

The !important rule is special because it has the ability to override the natural cascade of CSS styles.

!important规则很特殊，因为它可以覆盖CSS样式的自然级联。

Consider the following HTML/CSS code… What color do you think the text will be?

考虑下面HTML / CSS代码...您认为文本是什么颜色？

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

div h1 {
  color: blue !important;
}

div h1 {
  color: green;
}

Normally, if we have two CSS rules with identical specificity the latter rule would win. In this case, the earlier CSS rule beats any latter rules simply because it has the powerful !important rule.

通常，如果我们有两个CSS规则具有相同的特异性，则后一个规则将获胜。在这种情况下，较早CSS规则仅因为它具有强大的!important规则而击败了所有后继规则。

The text is blue!

文字为蓝色！

Using the same HTML markup, what if we got even more specific by targeting the body tag and h1#title?

使用相同HTML标记，如果我们通过将body标签和h1#title定位为更具体的内容怎么办？

div h1 {
  color: blue !important;
}

body div h1#title {
  color: green;
}

Will this have the ability to override the !important rule?

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

Nope! Wow, the !important rule is almost too powerful for its own good.

不！哇， !important规则本身就太强大了。

💪🤖💪 (💪🤖💪)

Since !important contradicts the expected behavior of CSS, it’s generally recommended to avoid using it. If you rely on !important too often it can cause a lot of unexpected behavior down the road, and new developers will have a hard time debugging their CSS. Why isn’t this text changing color! 😂

由于!important与CSS的预期行为相矛盾，因此通常建议避免使用它。如果过分依赖!important ，可能会导致很多意外行为，并且新开发人员将很难调试CSS。为什么文本没有变色！ 😂

Does this mean you should never use it?

这是否意味着您永远不要使用它？

重要使用场合！重要 (Occasions to Use !important)

As time has passed since !important was introduced to CSS there seems to be some consensus that it’s really only useful for a single job: dealing with foreign CSS.

自从!important被引入CSS以来，随着时间的流逝，似乎已经达成共识，即它实际上仅对一项工作有用：处理外来CSS 。

Foreign CSS is essentially any CSS that you don’t have direct ability to change or improve yourself. Two practical instances of foreign CSS are:

外国CSS本质上是您没有直接能力来改变或改善自己的任何CSS。国外CSS的两个实际实例是：

JavaScript Frameworks & External Libraries: This applies to popular libraries like Bootstrap, or Normalize. Since you can’t edit their CSS styles directly, sometimes your only option is override their CSS with your own !important rules.
JavaScript框架和外部库：这适用于流行的库，例如Bootstrap或Normalize 。由于您不能直接编辑其CSS样式，因此有时唯一的选择是使用自己的!important规则覆盖它们CSS。
User Styles: This used to be very popular years ago. User Styles provides a way for you to create your own CSS to inject on websites owned by other people/companies. For example, this dark theme for instagram.com
用户风格：几年前非常流行。用户样式为您提供了一种创建自己CSS的方式，以注入到其他人/公司拥有的网站上。例如， instagram.com的这个深色主题

Since foreign CSS can’t be changed by you (unless you take a job at Instagram to rectify their serious lack of a dark mode), the !important rule is really your only, and best option.

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

The folks at Mozilla Developer Network and CSS-Tricks seem to agree that !important is really only useful for dealing with foreign CSS

Mozilla开发人员网络和CSS-Tricks的人们似乎都同意!important实际上仅对处理外国CSS有用。

结论 (Conclusion)

If you are really tempted to use !important, try reflecting on architectural decisions that you can make. Not just your CSS either. This could mean adding new HTML tags, or applying new classes/ids. Engaging in this architecture-centric practice results in high quality code that’s a joy to maintain! 🤓

如果您真的很想使用!important ，请尝试思考可以做出的体系结构决策。不仅是CSS。这可能意味着添加新HTML标记或应用新的类/标识。从事这种以架构为中心的实践，可以得到高质量的代码，这是维护的乐趣！ 🤓

Have you found other appropriate uses for !important? Tweet us at @alligatorio and share it with us!

您找到!important其他合适用法了吗？通过@alligatorio发推，与我们分享！