何时使用 !important 才是正确选择

Avatar of Chris Coyier
Chris Coyier 发表于

DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始,获得 200 美元的免费额度!

灵感来自 Stephanie Rewis

在你的 CSS 中使用 !important 通常意味着你自恋、自私或懒惰。尊重以后的开发者...

对于那些不知道的人来说,!important 规则的工作原理如下

p {
  color: red !important;
}
#thing {
  color: green;
}
<p id="thing">Will be RED.</p>

即使 ID 选择器的特异性更高,该段落也将是红色的!important 规则会覆盖该特定属性。

Stephanie,肯定是出于沮丧,她谈到在 CSS 值后面添加 !important 可能会被滥用,并导致 CSS 混乱且难以维护。不幸的是,典型的用例是这样的

  1. 为什么我的该死的 CSS 不起作用?!
  2. (使用 !important 规则)
  3. 好的,现在可以了

然后下一个人来了,试图做出新的改变。他试图改变一些现有的 CSS 规则,但现在**他们**的改变没有按照预期的方式进行。他将问题追溯到 !important 规则,然后做出选择。他可以尝试删除这些规则,并尝试让事情回到正轨,或者添加一些他自己的规则来对抗它们,并完成他的更改。由于他可能不确切知道为什么首先添加了这些 !important 规则,他可能会选择第二个选项,因为担心会破坏网站上他不知道的其他地方的东西。因此,恶性循环开始了。

潜在的良好用例:实用程序类

那么,!important 规则什么时候才是真正有用且是个好主意呢?在我看来,实用程序类是一个很好的用例。

想想“按钮”。假设你的网站上有一个名为 .button 的类,无论你把它放在什么元素上,你都希望该元素看起来像一个按钮:特定的字体、圆角、特殊的背景和边框等等。所以你这样做

.button {
   background: red; 
   color: white;
   padding: 3px;
   border-radius: 5px;
   border: 1px solid black;
}
<a class="button" href="#">Do Thing</a>

特异性0,0,1,0。一旦该元素受到另一个具有更高特异性的选择器的影响,你可能会遇到样式问题。像

<section id="content">
   <p>text text blah <a href="#" class="button">Do Thing</a></p>
</section>
#content a {
  border-bottom: 1px dotted blue;
}

现在,你为其设计了特定设计的那些按钮有一个蓝色的虚线下边框,这不是你想要的。这是一个类似场景发生的 fiddle

我不认为这是草率的 CSS 的错。编写一个特异性值高于 0,0,1,0 并意外地搞砸一个按钮的 CSS 选择器很容易,而且通常是完全有效的。

为了使你的按钮类超级健壮,并且不容易被篡改,请在值上放置 !important 规则。甚至可以添加一些你的按钮不需要但可能会把它搞砸的规则。

.button {
   background: red            !important;
   color: white               !important;
   padding: 3px               !important;
   border-radius: 5px         !important;
   border: 1px solid black    !important;

   /* For good measure */     
   text-decoration: none      !important;
}

任何其他“实用程序类”都可以从中受益。想想流行的 “clearfix” 类,它使用伪元素来完成它的工作。伪元素正变得越来越流行,并被用于更多的事情,因此有可能有一个选择器覆盖 clearfix 伪元素,并导致浮动清除失败。几乎可以肯定这不是你想要的,所以在这些元素上添加 !important 规则可能会有用。

我甚至与 Nicole Sullivan 谈过,她说她会在她在她的 OOCSS 框架 中使用的间隔类中添加 !important 规则,而且她很难接受这个想法,因为她的 CSS 编写风格实际上使得编写特异性高于 0,0,1,0 的选择器变得非常罕见。

用户样式表

我相信 !important 规则最初的用例和存在的原因是用户样式表。也就是说,你编写的一个自定义样式表,你告诉 Web 浏览器将其应用于访问的每个页面。在像 Safari 这样的浏览器中,这尤其容易做到。偏好设置 > 高级 > 样式表,然后选择一个。在这个用户样式表中,你可以做一些事情,比如 隐藏评论隐藏广告,或者通过设置字体颜色和大小来尝试你自己的可读性改进。

由于这些样式适用于所有网站,而不是特定网站,你需要编写相当通用的选择器,最有可能适用于所有网站,比如 body { }。但是像这样的选择器的特异性非常低(0,0,0,1),很可能会被网站自己的样式所击败。因此,!important 规则允许你编写通用的选择器,但仍然有能力改变事情。

其他?

那么,你们呢?有没有一些你认为很可靠的 !important 用例?我很想听听。