css - 为什么不鼓励使用 `!important`？

Question

标记为css的几个答案不鼓励使用，!important以支持特异性。为什么？

Answer 1

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

如果您使用 Firebug 或 Chrome 开发工具检查显示“Richard”的标题元素，您应该会看到这些规则，顺序如下：

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

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

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

现在，与这个 JS fiddle进行比较- 实际上是相同的，但有一个现在使用的新规则：http !important: //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;
}

同样，规则是根据它们的特殊性排序的——但请注意，这一次，虽然首先列出的最具体的规则指定了 a colorof yellow，但浏览器将文本呈现为黑色！这是因为该!important声明打破了特异性的正常行为，以一种难以追踪的方式优先。想象一个更现实的网站，可能有数百条规则，而控制规则的规则color并不明显要查找或更改。

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