灵感来自 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 混乱且难以维护。不幸的是,典型的用例是这样的
- 为什么我的该死的 CSS 不起作用?!
- (使用 !important 规则)
- 好的,现在可以了
然后下一个人来了,试图做出新的改变。他试图改变一些现有的 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
用例?我很想听听。
我的 CMS 中有一个用例,我使用 TinyMCE 允许编辑 HTML。如果用户在其网站上托管了 TinyMCE 的特定样式表,编辑器会加载它,但通常像背景颜色这样的东西不会按应有的方式显示,因为 TinyMCE 本身已经设置了一些 !important 规则。通过再次添加 !important,我可以让我的客户按照他们习惯的页面/文章样式进行编辑。多亏了 Web 检查器,我才能很快找到这个问题。你真的让我爱上了这个检查器,Chris ;)
在处理由 JavaScript 生成的内联 HTML 设置的规则时,我倾向于使用 !important。这比浏览冗长的 JS 文件来查找上述代码要容易得多。
也将其用于像提到的 .button 这样的情况。
特别是当你构建一个多语言网站时,用于打印样式表,因为大多数情况下你会像这样定位其他语言
当你编写打印样式表时,第二条规则将始终覆盖,因为具有更高的特异性,有时也会覆盖级联(这取决于你如何组织你的样式表)。所以要覆盖它,你需要 !important 声明,而不是为每种语言编写两条规则。
我对 CSS 架构有一些想法,但我还没有把它们写下来,所以我必须在这里快速解释一下
你用按钮展示的例子说明了为什么你不应该使用 !important。你现在使得子类化你的按钮变得更加困难。在这种情况下,问题在于 “#content a” 声明,因为它会把事情搞砸,应该避免。你使用了一个非常具体的 ID 选择器来定位页面中非常广泛的一部分中的一个非常通用的链接元素:你的内容。像这样的广泛样式应该被指定为页面级样式,即:“a { … }”,然后针对特定类别的元素进行更多定位。
例如,在这个网站上,侧边栏中有一些方框,里面有链接。同样,人们可能会倾向于做类似 “#sidebar a { … }” 的事情,但这对于一个广义区域来说过于具体了。这些链接存在于使用类的特定模块中(在本例中为 .sidebar-box)。然后,可以使用 “.sidebar-box a { … }” 将这些容器中的链接的样式设置为与页面其余部分不同。
那可能出现在侧边栏框中的按钮呢?然后,可以使用 “.sidebar-box .button” 来定位样式,它具有更高的特异性,而无需 !important。
话虽如此,我确实相信有时使用 !important 是有效的:广义状态。我们页面上的对象可能处于 “隐藏” 或 “错误” 等特定状态,这些状态旨在覆盖对象的默认状态和样式。广义状态是一个可以应用于页面上任何位置的任何元素的类。因此,它需要突破特异性,这就是 !important 的用武之地。
(有了这些,我将努力更详细地记录我的想法,以便所有这些都更有意义。 :))
我完全同意这一点,作为一名开发人员,设计师在创建样式表时正确构建 CSS 结构非常重要。
同意...
当我在开发过程中发现一个只想使用 !important 并完成它的案例时,我会尝试进行实验,看看如何重写我的选择器以避免需要 !important - 通常最终会得到更好编写的 CSS
你在 Smashing 第四本书中的文章很棒!我真的很感谢你的建议。
我在一个特殊情况下使用它来使 IE9 保持与普通浏览器相同的溢出。在这种情况下,在 ie<9 上,它会显示一条消息,告诉用户升级浏览器,所以在所有其他浏览器中,内容都会正常溢出,但 IE9 仍然理解一些错误的 css,所以我不得不使用 !important 来使其正确呈现。
哇,谢谢.. 我不知道这个技巧..
我很少使用它,但我很想知道在 WordPress 中是否正确使用了它。
当插件样式覆盖我的 CSS(并且插件 CSS 非常具体)时,我会使用它。我的想法是,在我的 CSS 中更改它可以避免在插件更新时被删除。
有更好的方法吗?
正如 Jonathan 已经提到的,我认为当创建一个旨在覆盖文档中任何元素样式的类时,
!important
是正确的工具。另外,每当我设置输入字段的行高样式时,我都会使用
!important
,因为 Firefox 默认样式表包含以下内容我发现自己会覆盖内联样式,这通常也是一种不好的做法。但是,我网站上的图片是通过内联样式而不是类来浮动的,这有利于 RSS 源等中的文本流动。
在移动样式表中,右浮动是一个可用性问题,因为它们会中断手指滚动并将布局推出。在这种情况下,!important 很有帮助,因为内联样式优先于层叠中的所有内容。
使用媒体查询时,有时需要或至少可以接受使用 !important 覆盖样式。假设您在主样式表中使用
.foo li:nth-child(4n+1) { clear: left; }
清除某些内容,然后希望改为在nth-child(odd)
上清除,您必须使用相同的选择器显式重置第一个清除,而不是这样做此外,
img { max-width: 100% !important; }
在移动样式表中通常很有用。题外话
在您的代码示例中使用
rel="CSS"
的原因是什么?HTML 规范的示例是<pre><code class="language-pascal">
,这表明class
属性将是适当的选择。我只有在覆盖 ajax 样式或远程样式时才会使用它。通常这些情况发生在处理 Joomla 网站时。
我发现自己使用 important 规则的唯一情况是覆盖我无法自行编辑的外部 javascript 的样式。除此之外,我认为 css 提供了足够的可能性来设置页面样式,而无需依赖 important 规则。
是的,这经常发生在我身上。随着我学到越来越多的知识,并在 HTML 和 CSS 的艺术中变得越来越高级,我开始在我的 CSS 中越来越少地使用 !important 样式,我同意,这是一件非常好的事情。我仍在努力完全理解特异性,尽管到目前为止这还没有太大问题。
感谢您发布这篇具有教育意义和帮助的文章!
当我对条目中的链接有特殊样式时,我有几次将 body 标签添加到 button 类中。
好还是坏?
关于良好编程实践的建议
每次使用 !important 时,都要为后代写一个简短的注释 - 例如:“确保所有按钮都相同”或“覆盖 JS 设置的 ... 样式” - 清楚地说明 !important 的原因
给自己留个便条:我还没有注释 !important,但我开始越来越多地注释我的 css,所以关于 !important 的注释将包含在以后的工作中
也许我的技能还不够... 但我从来没有用过 :)
啊哈!我也从未学过如何使用 <code>!important</code>!
我有罪...
我发现它在处理第三方集成时很有用,因为他们的前端代码看起来像(而且可能是)是 10 年前由后端人员编写的。它还可以方便地覆盖第三方 JavaScript 的样式。
在我工作的地方(企业领域),我们最近将 SharePoint 2010 项目的后端集成外包给了印度,当我审查一个里程碑时,他们用 !important 弄乱了全局 css。你看到了它,然后想“我的天哪”。然后你感谢上帝,供应商承担了技术债务。令我惊讶的是,我在职业生涯中见过的最糟糕的事情发生在这份工作中——而且现在是 2011 年。
书签 - 是问题所在,所有内容都应该是 !important
我实际上写了一篇关于这个话题的文章,“每个主题开发者都应该遵守的规则”。
我认为使用 !important 是一种懒惰的解决方法。除非你想覆盖一些标签,否则你真的不需要它,如果你正在开发某些东西,你就不应该需要覆盖你自己的标签。
如果你正在为一个具有默认样式表的第三方主题设计样式,你应该使用它。例如,LightCMS 有自己的核心样式表,有时会弄乱你的外观,所以你需要用 !important 覆盖它们。
Gantry 框架也是如此,我相信还有一些其他的东西。
Bagoosh!
在 SharePoint 中尝试做任何事情时,!important 是必须的。
并非如此,你可以覆盖默认的 SP 样式,当你检查元素时,你可以判断规则在层叠中来自哪里。我们的印度团队疯狂地使用 !important,因为他们不理解层叠,也不懂好的前端开发。
我非常同意 Jared 的观点。SP2010 有大量的内联样式,这些样式是由不可编辑的默认服务器端脚本生成的。对于任何不是完全自定义构建的 SP 网站来说,Important 标签都是必须的。
即便如此,即使是最糟糕的 CSS,与 SP2010 吐出的意大利面工厂式的标记相比,看起来也很漂亮。由于决定使用 SP,我们对此持保留态度,并继续前进。
奇怪的是,没有提到跨浏览器的 min-width/height,还是我错过了什么?
目前唯一不支持 min-/max-width 的“主要”浏览器是 IE6。我宁愿专门针对它
min-width: 200px;
_width: 200px; /* 仅限 IE6 */
我个人在处理一些我无法完全控制结果的第三方小部件时会使用它。一个例子是 Twitter feed 小部件之一。通常你可以通过在 javascript 中声明它来获得一些控制,但是我更喜欢保持原样并自己设置样式。通过这种方式,我也可以更好地控制最终结果。
我真正使用 !important 的唯一一次是在过去,那时我会为像 myspace 这样的东西创建一个模板,但那是几年前的事了。
在什么情况下浏览器会跳过 CSS 命令,所以我们需要“!important”?
谢谢,无论如何都是一篇好文章 :-)
我很少使用 !important。我将它用于打印媒体(删除浮动/使其宽度为 100% 等),有时用于覆盖“即插即用”CMS 插件的内联样式,这些样式维护/编辑起来很麻烦(因为我不是文件的作者)。在后者中,我认为将来有人编辑插件 CSS 比编辑我的 CSS 并添加 !important 更麻烦。
这个小属性多次拯救了我的生命,尤其是在跨浏览器测试期间(现在我说的是 IE ;))。
这个技巧非常好。我不知道这种技术。
可悲的是,我想我可能属于“不知道更好”而不是“懒惰”的类别。
直到几周前,在我开发新网站时,我实际上从未使用过 !important 声明。我在这里坐了几个小时,试图让文本输入字段的背景在 IE 7 中透明,但它就是不听话。像往常一样,在所有其他非 IE 浏览器中一切正常!
我已经尝试了所有我能想到的办法,并在谷歌上搜索了很久,最终我想起了关于“!important”的内容,尝试了一下,它奏效了。
我不得不说,在经历了几个小时的沮丧之后,我完全不知道为什么我的背景样式不起作用,这感觉像是来自上天的礼物。
如果有一种更好的方法可以在不使用 !important 的情况下实现这一点,如果有人能告诉我,我将不胜感激 : )
谢谢各位,克里斯的另一篇很棒的文章!
我不能使用 !important,我工作的“质量保证”部门不允许我使用它。他们说这不是一个好的做法。 :(
也许你可以把这篇文章发给他们 =)
我在我的 WordPress 子主题中使用了 !Important 来覆盖父主题的样式(我只需要做一些修改,所以在我看来这样做是可以的)
子主题在父主题之后加载它们的 CSS,所以只要你使用与父主题完全相同的选择器,你就不需要 !important 规则来覆盖。小心使用。
我喜欢将 !important 用于 noscript 内容。假设你在 jQuery 中使用了大量的透明度和位置设置,并且希望你的网站在没有它的情况下也可以浏览,那就把一堆 !important 的 CSS 放在 noscript 中,嘿,瞧…
为什么不直接设置默认的 CSS,然后用 jQuery 来操作它呢?好吧,考虑一下这个
还有一些 jQuery
然后,当你的 JS 加载时,你会看到 #foo 在屏幕上的位置一闪而过。然而,如果我们设置
在我们的 CSS 中,然后执行
#foo {
left: 0px !important;
}
那么没有启用 JS 的人肯定会在其最终动画位置看到 #foo。
再见,
Aaron
最后一点应该是
“然后执行
<noscript>
<style type="text/css">
#foo {
left: 0px !important;
}
</style>
</noscript>
:oE
我在两种情况下使用它:用于 IE hack 和打印样式表。
我一直在 html 元素上添加一个 id
<!doctype html><html lang=en id=I>
...
或者,如果你想真正发挥创意,你可以使用 ! 作为 id。
<!doctype html><html lang=en id=!>
...
然后在你的 CSS 中,你可以像这样提高任何 CSS 选择器的权重。
.content .class{background:pink}
#I .class{background:orange;}
如果你使用 ! 点,你必须对其进行转义
.content .class{background:pink}
#\! .class{background:orange;}
!important 对于覆盖插件非常有用,这意味着你可以升级插件而不用担心!
!important 就像它的名字一样非常有用。感谢 Chris 写了这篇文章。
首先感谢 Chris 写了这篇文章..
老实说,我在编写 CSS 时尽量避免使用 !important。在你的例子中,与其使用 !important,我宁愿使用
#content a.button, .button {
background: red;
color: white;
padding: 3px;
border-radius: 5px;
border: 1px solid black;
}
但是 !important 在用作 IE max-height 错误修复的 CSS hack 时变得很方便。你可能知道,IE 不识别 max-height (max-width),因此你可以执行以下操作
#wrapper{
max-width: 500px; /* 适用于除 IE 之外的大多数浏览器 */
width:auto!important; /* IE max-width hack */
width:500px; /* width 值必须与 max-width 值相同 */
}
这将帮助你在 IE7+ 中获得 max-width 或 max-height。也许它在以前的 IE 版本中也可以工作,但我没有尝试过。
我没有阅读所有的评论,但我(认为)我有时需要它来覆盖某些 WordPress 插件使用的样式规则。我认为在那些时候它是一个救星。
我曾经在一个客户的网站上工作,该网站有超过 900 个 !important 声明。
我靠,真麻烦!
我完全同意!
!important 规则被广泛错误地使用,它已经变成了一个贬义词。
就我个人而言,我根本不喜欢使用它,主要是因为当我编写代码时,我会尝试考虑以后必须处理 CSS 的其他开发人员。
当我遇到它时,我倾向于查看它为什么会被这样做,通常它是完全有效的,而其他时候它只是一个不应该出现的“快速修复”。
我的观点是,只有在你别无选择的时候才使用它,能力越大,责任越大 ;)
我本来想对这篇文章说些俏皮话,但在阅读评论后忘记了。
像往常一样好东西。继续努力吧!
我现在在一个到处使用“!important”并结合其他充满文件覆盖其他样式的文件夹的地方工作。处理这些页面是一场噩梦。它导致了我正在经历的很多问题。太糟糕了。
我在一种情况下使用 !important,你有一些类似
.stylized .stylized_table tr:nth-child(even){background-color:blue;}
并且你想通过设置一个类来突出显示该表格行(因为你很酷)。
所以我的高亮类将类似于
.highlighted{background-color:red !important;}
我认为大多数 !important 的使用都很有问题。即使现在看起来不错..
我认为它们有意义的一个地方是像
1) 当你覆盖 JavaScript 设置的内联样式以用于媒体查询、打印样式表等时。
2) 当你覆盖第三方样式表中 !important 的使用时(*咳嗽* bootstrap *咳嗽*)。
3) 当你修复一些奇怪的浏览器错误,由于某种原因你只能使用 !important 来修复时
4) 当你只是想当个混蛋的时候。
在我看来,在其他任何情况下都不应该使用它,*并且*你应该始终留下评论说明你为什么使用它,以便未来的开发人员能够弄清楚如果他们将其取出会破坏什么。