Recently in the project found a lot of CSS code inside the use of!important to cover the original high-priority style. By common sense, the more flexible things are, the more work needs to be done. So it is assumed that flexible and convenient rules like!important, if used much, will certainly have an impact on performance. Based on this consideration, all of these styles were originally intended to be removed by raising the priority level. But then a think, or go to Google, guess is generally unreliable. So I found this article was!important bad for performance? Here is the approximate meaning:
Firefox's parsing code /source/layout/style/nsCSSDataBlock.cpp#562对于important的处理是这样的:
for CSS
if (aisimportant) { if (! Hasimportantbit (apropid)) = pr_true; Setimportantbit (apropid); Else { // ...
source/layout/style/nsCSSDataBlock.h#219这里面有条评论算是对上面代码的解释:
/* * * Transfer the state for |apropid| (which may a shorthand) * FROM |afromblock| to the block. The property being transferred * is!important if |aisimportant| are true, and should replace an * existing!import Ant property Regardless of it own importance * If |aoverrideimportant| is true. * * ... */
As can be seen from the above, Firefox's judgment on the!important rule is simple: it overrides the normally generated style rule with the style that contains!important, and then, if it resolves to a later!important rule, Compare the priority with the previous important rule. That is, a CSS rule that uses!important is set to the highest priority, and then the highest priority is used to determine which style to apply.
The conclusion is that the use of!important has no negative effect on performance. However, this rule is less to be considered in terms of maintainability. However, this rule has a bug in the IE6 (IE6 IE7 (q) IE8 (q) does not fully support the!important rule) and should be noted when using it.
Reference article:
Https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
Http://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html
Http://www.w3.org/TR/CSS2/cascade.html#important-rules
http://w3help.org/zh-cn/causes/RA8003
Http://stackoverflow.com/questions/13743671/is-important-bad-for-performance
http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/