为什么使用`！important'不鼓励？ [英] Why is the use of `!important` discouraged?

问题描述

若干答案标记为 css ，阻止使用！important 赞成特异性。为什么？

Several answers tagged css discourage the use of !important in favor of specificity. Why?

推荐答案

有实际的数学可以用来预测，控制和逆向工程的CSS规则的影响。通过使用！important 你打破了。请查看此JS小提示，例如，不使用！important ： http://jsfiddle.net/hXPk7/

There is actual math you can use to predict, control, and reverse-engineer the impact of CSS rules. By using !important you're breaking that. Look at this JS fiddle for example, which doesn't use !important: http://jsfiddle.net/hXPk7/

如果您使用Firebug或Chrome开发工具来检查标题元素中Richard的位置，您应该按照以下顺序看到这些规则：

If you use Firebug or Chrome dev tools to inspect the title element where it says "Richard", you should see these rules, in this order:

/**************************/
/* /hXPk7/show/ (line 20) */
/**************************/
#myExample #title .name {
    color: yellow;
}

/********************************************************/
/* /hXPk7/show/ (line 14) - Inherited fromdiv#myExample */
/********************************************************/
#myExample {
    color: blue;
}

注意，这不是它们在CSS样式表中出现的顺序 - 而是以它们的特异性的降序排列。优先级列表首先列出，其他（其规则被更具体的规则覆盖）可能具有删除的属性。

Note that this is not the order in which they appear in the CSS stylesheet - instead they are ordered in decreasing order of their specificity. The ones which take precedence are listed first, and the others (whose rules are overridden by more specific rules) probably have a property crossed out. This demonstrates that specificity makes it easy to trace (debug?) where an element is getting its CSS properties from.

现在，与相比， /jsfiddle.net/hXPk7/1/rel =nofollow>这个JS的小提琴 - 这是有效的相同，但有一个单一的新规则，现在使用！important ： http://jsfiddle.net/hXPk7/1/

Now, compare with this JS fiddle - which is effectively the same, but has a single new rule which now uses !important: http://jsfiddle.net/hXPk7/1/

使用Firebug或Chrome开发工具检查同一元素，您会看到如下所示的内容：

Inspect the same element using Firebug or Chrome dev tools, and you'll see something like this:

/**************************/
/* /hXPk7/1/show/ (line 20) */
/**************************/
#myExample #title .name {
    color: yellow;
}

/**************************/
/* /hXPk7/1/show/ (line 26) */
/**************************/
span {
    color: black !important;
}

/********************************************************/
/* /hXPk7/1/show/ (line 14) - Inherited fromdiv#myExample */
/********************************************************/
#myExample {
    color: blue;
}

同样，规则是根据它们的特异性排序的 - ，而最先列出的最具体的规则指定黄的颜色，浏览器会将文本呈现为黑色！这是因为！important 声明已经破坏了特异性的正常行为，以可能具有挑战性的方式优先。想象一个更现实的网站，可能有数百条规则，控制颜色的网站不容易找到或更改。

Again, the rules are ordered according to their specificity - but note that this time, while the most specific rule which is listed first specifies a color of yellow, the browser instead renders the text as black! This is because the !important declaration has broken the normal behavior of specificity, taking precedence in a way which can be challenging to trace. Imagine a more realistic web site, with potentially hundreds of rules, and the one controlling the color isn't obvious to find, or to change.

现在，这可能是开发者工具的一个问题，但我认为它反映了！important 预测优先级系统，使其更具挑战性。也许有时候使用它，但它不应该是您在编写CSS时遇到的第一个工具。

Now, maybe this is a problem with the developer tools, but I think it reflects the fact that !important takes a normally easy-to-predict system of precedence and makes it more challenging. Maybe there are times to use it, but it should not be the first tool you reach for when writing CSS.

这篇关于为什么使用`！important'不鼓励？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！