使用“!important"的含义是什么?在 CSS 中? [英] What are the implications of using "!important" in CSS?

问题描述

我已经在一个网站上工作了几个月，很多时候当我试图编辑某些东西时，我必须使用 !important，例如 :

I've been working on a website for a few months, and a lot of times when I've been trying to edit something, I have to use !important, for example:

div.myDiv { 
    width: 400px !important;
}

为了让它按预期显示.这是不好的做法吗?或者 !important 命令可以使用吗?这会导致任何不受欢迎的事情吗?

in order to make it display as expected. Is this bad practice? Or is the !important command okay to use? Can this cause anything undesired further down the line?

推荐答案

是的，我会说你使用 !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"类的按钮，它们是蓝色的.除了 ID 为buyNow"的唯一按钮，它是绿色的.整个规则(在本例中为颜色和字体大小)的重要性由选择器的特殊性管理.

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;
}

那么颜色属性将比字体大小具有更高的重要性.事实上，颜色比 button#buyNow 选择器中的颜色更重要，而不是字体大小(仍然由常规 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).

一个元素 的字体大小为 2em，但颜色为 blue.

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

这意味着两件事:

1. 选择器没有准确传达其中所有规则的重要性
2. 覆盖蓝色的唯一方法是使用另一个 !important 声明，例如在 button#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.

• 覆盖第 3 方代码 &内联样式.

通常我会说这是代码异味的情况，但有时您别无选择.作为开发人员，您的目标应该是尽可能多地控制您的代码，但在某些情况下，您的双手被束缚，您只需要处理现有的任何内容.谨慎使用 !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 用于 .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.

这篇关于使用“!important"的含义是什么?在 CSS 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！