为什么使用`！重要`不鼓励？

Question

标签为css的几个答案阻止使用!important有利于特异性。为什么？

Answer 1

有实际的数学可以用来预测，控制和反向工程CSS规则的影响。通过使用!important你打破了这一点。看看this JS fiddle例如，不使用!important：http://jsfiddle.net/hXPk7/

如果你使用Firebug或Chrome开发者工具来检查它说：“理查德”的称号元素，你应该看到这些规则，顺序如下：

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

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

请注意，这不是它们在CSS样式表中出现的顺序，而是它们按照它们的特殊性的降序排列。优先列出的是先列出的，其他列表（其规则被更具体的规则覆盖）可能具有划掉的特性。这表明特异性使得跟踪（调试？）元素获取其CSS属性的位置变得很容易。

现在，比较this JS fiddle - 这实际上是一样的，但它现在使用!important一个新的规则：http://jsfiddle.net/hXPk7/1/

使用Firebug或Chrome开发工具检查相同的元素，你会看到类似这样的：

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

同样，规则是根据它们的特异性有序 - 但请注意，这一次，当它首先列出最具体的规则规定的yellow一个color，浏览器，而不是呈现文本黑色！这是因为!important声明打破了特异性的正常行为，优先考虑可追踪性。设想一个更现实的网站，可能有数百条规则，而控制color的网站并不明显可以找到或更改。

现在，也许这是开发人员工具的问题，但我认为它反映了!important采用通常易于预测的优先系统并使其更具挑战性的事实。也许有时候需要使用它，但它不应该成为编写CSS时的第一个工具。