Is !important bad for performance?
css, performance
Solution
It shouldn't have any discernible effects on performance. Seeing Firefox's CSS parser at `/source/layout/style/nsCSSDataBlock.cpp#572` and I think that is the relevant routine, handling overwriting of CSS rules.
It just seems to be a simple check for "important".
if (aIsImportant) {
if (!HasImportantBit(aPropID))
changed = PR_TRUE;
SetImportantBit(aPropID);
} else {
// ...
}
Also, comments at `source/layout/style/nsCSSDataBlock.h#219`
/**
* Transfer the state for |aPropID| (which may be a shorthand)
* from |aFromBlock| to this block. The property being transferred
* is !important if |aIsImportant| is true, and should replace an
* existing !important property regardless of its own importance
* if |aOverrideImportant| is true.
*
* ...
*/
Firefox uses a top down parser written manually. In both cases each CSS file is parsed into a StyleSheet object, each object contains CSS rules.
Firefox then creates style context trees which contain the end values (after applying all rules in the right order)
From: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing
Now, you can easily see, in such as case with the Object Model described above, the parser can mark the rules affected by the `!important` easily, without much of a subsequent cost. Performance degradation is not a good argument against `!important`.
However, maintainability does take a hit (as other answers mentioned), which might be your only argument against them.
Problem
I hate them, it defies the cascading nature of CSS, and if you don't use them with care you end up in a loop of adding more `!important`. But I want to know are they bad for performance? EDIT From the (fast) replies I can conclude it won't have a (significant) impact on performance. But it's nice to know, even if it's just as an extra argument for discouraging others ;). EDIT 2 BoltClock pointed out that if there are 2 `!important` declarations the specs says it will pick the most specific one.