Recently in the project to find a lot of CSS code inside the use of!important to overwrite the original high priority style. According to common sense, the more flexible things, the more work needs to be done. So take it for granted that a flexible and convenient rule like!important would certainly have an impact on performance if used much. Based on this consideration, all of these styles were intended to be removed by raising the priority level. But then a thought, or to google it, guess generally are not reliable. So I found this article is!important bad for performance? Here is the general meaning: firefox for CSS parsing code /source/layout/style/nsCSSDataBlock.cpp#562对于important的处理是这样的:
if (aIsImportant) {
if (!HasImportantBit(aPropID))
changed = PR_TRUE;
SetImportantBit(aPropID);
} else {
// ...
source/layout/style/nsCSSDataBlock.h#219这里面有条评论算是对上面代码的解释:
/**
* Transfer the State for Apropid (which May is a shorthand)
* from Afromblock. The property being transferred
* are!important if aisimportant is true and should replace a
* existing !important property Regardless of it own importance
* If Aoverrideimportant is true.
*
* ...
*/
As you can see from the above, Firefox's judgment of the!important rule is simple: the style containing the!important is directly overwritten with the normal generated style rules, and then if you parse to the back of the!important rule, The previous important rules are compared to the precedence level. That is, CSS rules that use!important are placed to the highest priority, and then the highest priority is used to determine which style to apply.
The conclusion is that using!important has no negative impact on performance. But from a maintainability standpoint, use this rule less. However, this rule has bugs in the IE6 (IE6 IE7 (q) IE8 (q) does not fully support!important rules) and should be noted when used.