Looking for the lessons? Get started!
The uses and misuses of the !important property
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
[U]se of !important should be considered only after all other avenues have been exhausted. — Louis Lazaris
Is it a property? A value? Certainly the !important CSS thingadoo doesn't fit in the normal scheme of things. That's why we have a separate page for it.
Web ninjas Tommy Olsson and Paul O'Brien call it a statement. A CSS declaration with an !important statement added is called an !important declaration. If they say it, I believe it.
So now that we've hung a label on it, what exactly is it?
Basically, if you hang the !important statement onto a CSS declaration, that declaration overrides all other similar declarations in the stylesheet, including the ones that would normally take precedence by being later in the stylesheet. It gives more "weight" to that particular declaration.
If we have this in our stylesheet:
#sidebar {
background-color: red;
}
...
#heading #sidebar {
background-color: green;
}
then all functions as it would normally. The green background color appears in the element ID'd by both the heading and the sidebar elements. However, if we attach the !important statement to the first background-color declaration:
#sidebar {
background-color: red !important;
}
...
#heading #sidebar {
background-color: green;
}
then the background color in both elements will be red, no matter what the second declaration says. The !important statement overrides the later CSS declaration.
Placement of the !important statement is, well, important. It must go after all the values in the declaration, but before the semi-colon. Otherwise it will not function.
The SitePoint ninjas also remind us:
If !important is used on a declaration with a shorthand property, it's equivalent to adding !important to all of the individual subproperties.
Using the !important Statement to Whip IE Into Shape
Web designer Louis Lazaris notes several useful, if limited, techniques for employing the !important statement in your designing.
See the SitePoint Reference page for more information about IE's failure to properly implement !important.. Another reason to be very careful of this declaration.
However, Lazaris states flatly:
… I highly recommend that the !important declaration never be used. I know, that is a bold statement, and there will obviously be situations where a developer will be tempted to use it, but in 99% of cases there will be a better solution. … I have been coding HTML and CSS for about 9 years now [as of June 2009], and I have never used the !important declaration. In fact, for a long time I never even knew it existed, which, in retrospect, was a good thing.
It is a bold statement, and one you rarely see an accomplished designer make. However, he is, overall, correct in my view. Lazaris lists three main drawbacks to using the !important statement, which I'm going to pass along to you:
- Encourages sloppy, poorly thought-out code
- Creates code that is less maintainable
- Overrides styles declared in user style sheets, thus degrading accessibility
Lazaris concludes his article with the statement:
With those significant factors in mind, use of !important should be considered only after all other avenues have been exhausted. … If you do use it, it would probably make sense, if possible, to put a comment in your CSS next to any styles that are being overridden, to ensure better code maintainability.
The SitePoint ninjas agree:
Introducing even one uncommented important declaration into an author style sheet has a huge negative impact on the style sheet's maintainability, so it should be used with care. The only way to overwrite an important declaration is by using even more important declarations — an approach that soon becomes unmanageable. A style sheet that's littered with important declarations often signals that an author hasn't thought clearly enough about the structure of the CSS.
On the other hand, Web developer and accessibility expert Brigitte Simard says:
Even if the !important declaration should be used with caution, it's a very useful and powerful expression that much deserves its place in our CSS world. … The !important declaration if used without much consideration can make CSS files difficult to maintain but if used with forethought, it can save time and effort.
So it's there for your use, but be very, very careful not to rely on it to bail you out of design jams. It is the nuclear weapon of stylesheets; most of the time the cost of using it outweighs the benefit.
I'm off to look over my own stylesheet and see if I can prune out the !important statements.
