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

Question

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

csscss-specificity

3

几个标记为css的答案鼓励使用特定性而不是!important，为什么？

- Richard JP Le Guen

这是我回应某人在Stack Overflow上评论的内容。 - Richard JP Le Guen

你的回答很好，但问题似乎太短且不完整，不能充分回答它（因此有累积的关闭投票）。 - BoltClock

@BoltClock - 你有任何改进建议吗？我并没有花太多时间思考，因为我的目标只是回应评论。 - Richard JP Le Guen

首先要记住的是，你的问题必须能够独立自主地存在 - 无论是关于站外文章还是SO内的其他问题。例如，您需要扩展所提及的评论以便为问题本身提供一些背景信息。您还可以引用和链接到一些反对使用!important的答案示例。 - BoltClock

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard JP Le Guen · Accepted Answer

有实际的数学可以用来预测、控制和反向工程CSS规则的影响。使用!important会破坏这种方法。例如，看看this 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属性变得容易。

现在，与this JS fiddle进行比较-它实际上是相同的，但是有一个新的规则现在使用了!important：http://jsfiddle.net/hXPk7/1/ 使用Firebug或Chrome dev工具检查相同的元素，您将看到类似于此的内容：

/**************************/
/* /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”声明破坏了特定性的正常行为，以一种可能很难追踪的方式优先处理。想象一个更现实的网站，可能有数百个规则，控制“颜色”的规则并不明显，也不容易更改。

也许这是开发工具的问题，但我认为这反映了“!important”采取了通常易于预测的优先级系统，并使其更具挑战性的事实。也许有时候需要使用它，但写CSS时不应该首先使用它。