css – 为什么不鼓励使用`！important`？

标记为 css的几个答案不鼓励使用！important有利于特异性.为什么？

解决方法

您可以使用实际数学来预测,控制和反向设计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;
}

同样,规则是根据它们的特殊性排序的 – 但请注意,这次,虽然最先列出的最具体的规则指定了黄色,但浏览器却将文本呈现为黑色！这是因为！important声明打破了特异性的正常行为,优先采用可能难以追踪的方式.想象一个更现实的网站,可能有数百条规则,控制颜色的网站并不容易找到或改变.

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

css – 为什么不鼓励使用`！important`？

解决方法

相关文章