是的，我会说你的例子使用！important 是不好的做法，很可能会导致进一步下降的不良影响。

Yes, I'd say your example of using !important is bad practice, and it's very likely it would cause undesired effects further down the line. That doesn't mean it's never okay to use though.

特异性是浏览器决定CSS如何影响页面的主要力量之一。选择器越具体，向其添加的重要性就越大。这通常与所选元素发生的频率一致。例如：

Specificity is one of the main forces at work when the browser decides how CSS affects the page. The more specific a selector is, the more importance is added to it. This usually coincides with how often the selected element occurs. For example:

button { 
    color: black; 
}
button.highlight { 
    color: blue; 
    font-size: 1.5em;
}
button#buyNow { 
    color: green; 
    font-size: 2em;
}

在此页面上，所有按钮均为黑色。除了具有highlight类别的按钮，它们是蓝色的。除了一个具有IDbuyNow的唯一按钮，即绿色。整个规则（在这种情况下，颜色和字体大小）的重要性由选择器的特殊性管理。

On this page, all buttons are black. Except the buttons with the class "highlight", which are blue. Except that one unique button with the ID "buyNow", which is green. The importance of the entire rule (both the color and font-size in this case) is managed by the specificity of the selector.

！important 是在属性级别而不是选择器级别添加的。例如，如果我们使用这个规则：

!important, however, is added at a property level, not a selector level. If, for instance, we used this rule:

button.highlight {
    color: blue !important;
    font-size: 1.5em;
}

那么color属性的重要性比font-事实上，颜色比按钮＃buyNow 选择器中的颜色更重要，相对于font-size（仍然由常规ID对类特殊性控制） ）。

then the color property would have a higher importance than the font-size. In fact, the color is more important than the color in the button#buyNow selector, as opposed to the font-size (which is still governed by the regular ID vs class specificity).

元素< button class =highlightid =buyNow> 2em 的字体大小，但颜色蓝色。

An element <button class="highlight" id="buyNow"> would have a font-size of 2em, but a color blue.

这意味着两件事：

1. 选择器没有准确地传达其中所有规则的重要性


2. 覆盖蓝色的方法是使用另一个 ！important 声明，例如按钮＃buyNow 选择器。

1. The selector does not accurately convey the importance of all the rules inside it
2. The only way to override the color blue is to use another !important declaration, for example in the button#buyNow selector.

这不仅使您的样式表更难以维护和调试，它开始一个雪球效果。一个！important 导致另一个覆盖它，另一个覆盖它，等等。它几乎从不停留在一个。即使一个！important 可以是一个有用的短期解决方案，它会回来咬你的屁股在长期。

This not only makes your stylesheets a lot harder to maintain and debug, it starts a snowball effect. One !important leads to another to override it, to yet another to override that, et cetera. It almost never stays with just one. Even though one !important can be a useful short-term solution, it will come back to bite you in the ass in the long run.

• 覆写使用者样式表中的样式。

这是！important 为用户提供了覆盖网站样式的方法。

This is what !important was invented for in the first place: to give the user a means to override website styles. It's used a lot by accessibility tools like screen readers, ad blockers, and more.

• 覆盖第三方代码和放大器。内联样式。

通常我会说这是一个代码气味的情况，但有时你只是没有选择。作为开发人员，你应该尽可能地控制你的代码，但是有时你的双手是绑定的，你只需要处理现有的任何东西。谨慎使用！important 。

Generally I'd say this is a case of code smell, but sometimes you just have no option. As a developer, you should aim to have as much control over your code as possible, but there are cases when your hands are tied and you just have to work with whatever is present. Use !important sparingly.

• 效用类

框架带有诸如 .hidden ， .error 或 .clearfix 。它们服务于单一目的，并且经常应用非常少但非常重要的规则。 （例如， display：none for a .hidden 类）。这些应该覆盖当前元素上的任何其他样式，并且绝对保证！important 如果你问我。

Many libraries and frameworks come with utility classes like .hidden, .error, or .clearfix. They serve a single purpose, and often apply very few, but very important, rules. (display: none for a .hidden class, for example). These should override whatever other styles are currently on the element, and definitely warrant an !important if you ask me.

使用！important 声明经常被认为是坏的做法，因为它有副作用，与CSS的核心机制之一：特异性。在许多情况下，使用它可能表示糟糕的CSS架构。

Using the !important declaration is often considered bad practice because it has side effects that mess with one of CSS's core mechanisms: specificity. In many cases, using it could indicate poor CSS architecture.

在某些情况下，它是可以容忍的，甚至是首选，但确保你仔细检查，其中一个案件实际上适用于你的情况，然后再使用它。

There are cases in which it's tolerable or even preferred, but make sure you double check that one of those cases actually applies to your situation before using it.