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

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

为了让它按预期显示。这是不好的做法吗?或者可以使用!important命令吗?这是否会导致后续出现不希望出现的情况?


当前回答

是的,我想说你使用!important的例子是不好的做法,而且很可能会导致后续的不良影响。但这并不意味着它永远都不能使用。

有什么问题吗?

当浏览器决定CSS如何影响页面时,专用性是起作用的主要因素之一。选择器越具体,它的重要性就越高。这通常与所选元素出现的频率一致。例如:

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

在本页上,所有按钮都是黑色的。除了类为“highlight”的按钮是蓝色的。除了一个标识为“buyNow”的独特按钮,它是绿色的。整个规则的重要性(在本例中包括颜色和字体大小)由选择器的特异性来管理。

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

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

那么颜色属性的重要性将高于字体大小。事实上,颜色比按钮#buyNow选择器中的颜色更重要,而不是字体大小(仍然由常规ID与类特异性控制)。

元素<button class="highlight" id="buyNow">的字体大小为2em,但颜色为蓝色。

这意味着两件事:

选择器不能准确地传达其中所有规则的重要性 覆盖蓝色的唯一方法是使用另一个!important声明,例如在按钮#buyNow选择器中。

这不仅使样式表更难维护和调试,而且开始了滚雪球效应。一个!重要的会导致另一个去覆盖它,再一个去覆盖那个,等等。它几乎不会只停留在一个人身上。即使一个!重要的可以是一个有用的短期解决方案,从长远来看,它会回来咬你的屁股。

什么时候可以使用:

重写用户样式表中的样式。

这就是!important最初被发明出来的目的:给用户一种覆盖网站样式的方法。它被屏幕阅读器、广告拦截器等辅助工具大量使用。

覆盖第三方代码和行内样式。

一般来说,我会说这是一个代码气味的情况,但有时你只是没有选择。作为一名开发人员,你的目标应该是尽可能多地控制你的代码,但在有些情况下,你的双手受到束缚,你只能使用现有的任何东西。少用!important。

实用程序类

许多库和框架都带有实用程序类,如.hidden、.error或.clearfix。它们只有一个目的,通常适用的规则很少,但却非常重要。(例如,对于.hidden类,display: none)。这些应该覆盖当前元素上的任何其他样式,如果你问我的话,这肯定是重要的。

结论

使用!important声明通常被认为是不好的做法,因为它有副作用,会破坏CSS的核心机制之一:特异性。在许多情况下,使用它可能表明CSS体系结构很差。

在某些情况下,它是可以忍受的,甚至是首选的,但在使用它之前,一定要仔细检查这些情况是否真的适用于您的情况。

其他回答

对我来说,使用!important是一个糟糕的CSS实践。它破坏了应用css规则的自然流程,其中属性是从上到下应用的。使用!important,属性现在将优先考虑最新的重要值。

这就像在脚本中使用goto关键字一样。虽然这是完全合法的,但还是最好避免。

是的,我想说你使用!important的例子是不好的做法,而且很可能会导致后续的不良影响。但这并不意味着它永远都不能使用。

有什么问题吗?

当浏览器决定CSS如何影响页面时,专用性是起作用的主要因素之一。选择器越具体,它的重要性就越高。这通常与所选元素出现的频率一致。例如:

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

在本页上,所有按钮都是黑色的。除了类为“highlight”的按钮是蓝色的。除了一个标识为“buyNow”的独特按钮,它是绿色的。整个规则的重要性(在本例中包括颜色和字体大小)由选择器的特异性来管理。

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

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

那么颜色属性的重要性将高于字体大小。事实上,颜色比按钮#buyNow选择器中的颜色更重要,而不是字体大小(仍然由常规ID与类特异性控制)。

元素<button class="highlight" id="buyNow">的字体大小为2em,但颜色为蓝色。

这意味着两件事:

选择器不能准确地传达其中所有规则的重要性 覆盖蓝色的唯一方法是使用另一个!important声明,例如在按钮#buyNow选择器中。

这不仅使样式表更难维护和调试,而且开始了滚雪球效应。一个!重要的会导致另一个去覆盖它,再一个去覆盖那个,等等。它几乎不会只停留在一个人身上。即使一个!重要的可以是一个有用的短期解决方案,从长远来看,它会回来咬你的屁股。

什么时候可以使用:

重写用户样式表中的样式。

这就是!important最初被发明出来的目的:给用户一种覆盖网站样式的方法。它被屏幕阅读器、广告拦截器等辅助工具大量使用。

覆盖第三方代码和行内样式。

一般来说,我会说这是一个代码气味的情况,但有时你只是没有选择。作为一名开发人员,你的目标应该是尽可能多地控制你的代码,但在有些情况下,你的双手受到束缚,你只能使用现有的任何东西。少用!important。

实用程序类

许多库和框架都带有实用程序类,如.hidden、.error或.clearfix。它们只有一个目的,通常适用的规则很少,但却非常重要。(例如,对于.hidden类,display: none)。这些应该覆盖当前元素上的任何其他样式,如果你问我的话,这肯定是重要的。

结论

使用!important声明通常被认为是不好的做法,因为它有副作用,会破坏CSS的核心机制之一:特异性。在许多情况下,使用它可能表明CSS体系结构很差。

在某些情况下,它是可以忍受的,甚至是首选的,但在使用它之前,一定要仔细检查这些情况是否真的适用于您的情况。

这个问题有点晚了,但它说的是“不管应用了什么其他风格,忽略它们,使用这个”。你可能会发现它有点困惑!因为在javascript中它不是一个运算符,但在CSS中它被称为一个分隔符令牌,只是表示优先级。这里有一个例子。


没有!重要的是:

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

输出红色


!重要的底部属性(相同的)

.set-color{
  color: blue;
 }

.set-color{
  color: red !important;
 }

输出红色(本来是红色的)


!重要的顶部属性(相同的)

.set-color{
  color: blue !important;
 }

.set-color{
  color: red;
 }

输出蓝色(表示忽略红色,使用蓝色)


我认为,在2014年底,当更多的规则被添加到工作草案中时,我们再次谈到这个问题是很重要的,不要对你的用户施加限制是非常重要的。我写这个小例子是为了解释发生这种事情的可能情况。这是从我在网上访问的一个真实的网站上截取的,可悲的是,我经常看到它。

表单文本编辑器字段

你有一个网站,你的网站依赖于填写表格和编辑文本。为了尽量减少眼睛疲劳,你尝试使用一种你认为每个人都可以接受的风格,因为你的用户主要是在晚上访问,你决定将背景颜色设置为白色,然后将文本颜色设置为黑色。默认情况下,表单是空白的,所以你输入文本(这次)以确保它可以工作:

...
background-color: black; /* I forgot important here, but it works fine on its own */
color: white !important;
...

几个月后,用户抱怨黑白相间太费眼了,但另一半人很喜欢,你怎么办?你添加了一个自定义主题,使用!important来覆盖内部样式,这样双方都满意,这就是它应该被用来做的:

...
background-color: white !important;   
color: black !important;
...

现在,这里发生了什么?你想要什么?如果您正确地记住了第一组中的!important标记,您就会注意到它不起作用,并且可能还记得您需要删除!important标记。但是你忘了一个…

没错,你得到了白底白文,如果用户尝试使用这种新风格(假设你保留了它),他们就再也无法阅读你的网页了。

当然,您没有意识到这一点,因为文本框是空的。你认为它会起作用!(假设是开发者最大的敌人,它就像骄傲和傲慢一样)。

制定并遵守自我暗示的规则

因此,在设计覆盖原始完整的css规则集时,基本规则应该只使用!记住,它是为异常而设的,首先就会扰乱css的自然顺序和意义。在大多数情况下,你根本不需要使用它。

了解用户如何自定义颜色

随着诸如扩展等工具的存在和像'userstyles.org'这样的网站的存在,它的时尚对口,你冒着使用!important标签疏远用户的风险!请记住,时尚并不会压倒它们。

不要限制你的访客

如果你在一个样式上使用!important,确保你让用户可以关闭这个样式(我不是说通过浏览器内部的“开/关”开关)。看在上帝的份上,不要让它默认。

Ads

人们越来越少使用时尚来删除广告,所以我不认为保护广告的重要性真的是一个问题。它只会惹恼那些试图定制你的网站的人。

我不会建议你使用它,除非它是必要的,有时可能是你的情况,因为你正在处理一个现有的项目。但是尽量远离它,尽量少用!重要的。

问题是,如果你使用太多,那么其中一个可能会无意中覆盖另一个。你的代码也不容易读懂,任何在你之后维护它的人都会把他/她的头发撕成碎片,因为每次你在CSS中做一些事情时都试图找到!important是一种巨大的痛苦。

检查这个:http://webdesign.about.com/od/css/f/blcssfaqimportn.htm