Several answers tagged css discourage the use of !important in favor of specificity. Why?
Asked
Active
Viewed 739 times
3
Richard JP Le Guen
- 28,364
- 7
- 89
- 119
-
This is [in response to a comment](http://stackoverflow.com/questions/2754787/css-margin-0padding-0-override/2763068?noredirect=1#comment22091331_2763068) someone directed my way. – Richard JP Le Guen Mar 23 '13 at 01:32
-
Your answer is good, but the question seems so short and *incomplete* as to not do it justice IMO (hence the accumulating close votes). – BoltClock Mar 23 '13 at 17:10
-
@BoltClock - You have a recommendation on how to improve it? I didn't give it much thought, as my goal was only to respond to the comment. – Richard JP Le Guen Mar 23 '13 at 21:21
-
The first thing to remember is that your question has to be able to stand on its own - this applies whether it's about an off-site article, or another question within SO. For example, you'll want to expand on the comment that you mention in order to provide some context to your question itself. You can also quote and link to some examples of answers that discourage the use of `!important`. – BoltClock Mar 24 '13 at 02:47
1 Answers
3
There is actual math you can use to predict, control, and reverse-engineer the impact of CSS rules. By using !important you're breaking that. Look at this JS fiddle for example, which doesn't use !important: http://jsfiddle.net/hXPk7/
If you use Firebug or Chrome dev tools to inspect the title element where it says "Richard", you should see these rules, in this order:
/**************************/
/* /hXPk7/show/ (line 20) */
/**************************/
#myExample #title .name {
color: yellow;
}
/********************************************************/
/* /hXPk7/show/ (line 14) - Inherited fromdiv#myExample */
/********************************************************/
#myExample {
color: blue;
}
Note that this is not the order in which they appear in the CSS stylesheet - instead they are ordered in decreasing order of their specificity. The ones which take precedence are listed first, and the others (whose rules are overridden by more specific rules) probably have a property crossed out. This demonstrates that specificity makes it easy to trace (debug?) where an element is getting its CSS properties from.
Now, compare with this JS fiddle - which is effectively the same, but has a single new rule which now uses !important: http://jsfiddle.net/hXPk7/1/
Inspect the same element using Firebug or Chrome dev tools, and you'll see something like this:
/**************************/
/* /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;
}
Again, the rules are ordered according to their specificity - but note that this time, while the most specific rule which is listed first specifies a color of yellow, the browser instead renders the text as black! This is because the !important declaration has broken the normal behavior of specificity, taking precedence in a way which can be challenging to trace. Imagine a more realistic web site, with potentially hundreds of rules, and the one controlling the color isn't obvious to find, or to change.
Now, maybe this is a problem with the developer tools, but I think it reflects the fact that !important takes a normally easy-to-predict system of precedence and makes it more challenging. Maybe there are times to use it, but it should not be the first tool you reach for when writing CSS.
Richard JP Le Guen
- 28,364
- 7
- 89
- 119
-
-
Nice explanation.. but it looks like you just explain a smarter way of writing css instead of using `!important`.. and not the reason of hating `!important`... which actually is your question. :) – sohaiby Oct 03 '15 at 12:43