As it stands, an author’s style sheet declarations will have precedence over any styles defined within a user’s style sheet. To level the playing field, we find !important. Adding this keyword combination after any declaration in your style sheet (as a user) will give your style the power to overcome what has been defined by the author. This returns the control of the style to the user, and is a good thing. Your site should look just fine if someone wants to change the font size you chose, right?
A Bit of Background Information
As developers, we need to keep !important in mind. A user defined style sheet with any !important declaration will take precedence over your style. However, if both the author and user have the same style declaration, yet neither is marked with !important, the authors style will stand. I don’t believe this is something to dwell on, but certainly something to keep in mind while developing.
Internet Explorer 6 vs. !important
It is difficult to speak about CSS without the mention of Internet Explorer 6. There is a major note to take home regarding Internet Explorer and !important; which is, of course, that IE doesn’t listen to it. Now that isn’t an entirely true statement, but it is mostly true. Internet Explorer will give precedence to any declaration tagged with !important — until that declaration is made again. If the same declaration is defined a second time, IE will give weight to the second definition, regardless of adding !important.
An Example of Implementation
This is where proper use needs to be brought up. The existence of this flaw in IE brings vision of ‘valid CSS hacks’ in that we are able to exploit a bug by using completely valid code. I will admit — I employ this very fault in IE to allow myself the ability to define a min-height cross-browser. In case you’re curious, here’s the code:
div#content { min-height:250px; height:auto !important; height:250px; }This technique actually brings up two faults of IE6 which make it possible. Number one, the failure to give !important precedence over other declarations. Number two, the treatment of height as min-height. In Internet Explorer, if the content within a container extends it’s defined height, IE will increase the height of that container as needed to display all of the content (unless otherwise styled).
Is it wrong to be implementing this? I find myself using min-height quite often and would be at a loss without this technique, but repeating styles in such a fashion doesn’t look very pretty, does it?
On My Way Out…
I’d like to shine some light upon proper usage of !important; it should not be used as a crutch if your style sheet isn’t rendering the way you had hoped. Chances are if you take a minute to see which styles are being applied, you can alter your CSS to compensate. Not only will your style sheet be more comprehensive, it will be much easier to manage without having to backtrack through dozens of !important declarations. When checking out some style sheets across the Web, it’s obvious that some developers are misusing the technique and that should be avoided. Take your time and plan your style sheet in a way which allows you to know exactly why a certain style is or is not applied when and where you want.
Comments
“Internet Explorer will give precedence to any declaration tagged with !important — until that declaration is made again. If the same declaration is defined a second time, IE will give weight to the second definition, regardless of adding !important.”
isn’t that the same as saying it doesn’t work at all?!
Nice article but i think you missed the most useful implementation of !important – when dealing with weighting in a cascade. As the #id has more ‘weight’ than .class you can override this by using !important. Obviously this works the same for other ‘weighting’ within the cascade such as ‘parent child’ definitions and html tag definitions (which have the least weighting of everything)
I know what your saying about it getting abused though – 99% of the time if your using it there is probably a better way….
Yeah, it’s so easy to just default to !important if you’re in a crunch and you’re just trying to get something out the shoot. I constantly have to catch myself from defaulting to these problematic shortcuts.
Great article.
Haha, yes my site suffers from overuse of !important. Thanks for the in-depth article.
@Nick: You brought up an interesting point in your reply, I hadn’t thought to bring that up.
@P.J.: It’s good that you catch yourself, though. Using !important to see whether or not you’re crazy for the style not being applied is one thing — leaving it there because it works instead of solving another issue is different. I’m constantly adding !important temporarily to help me find out where I may have gone wrong earlier in the sheet.
@Paul: I’m glad to see you’ve found your way to Monday By Noon! Thanks for taking the time to read the post.
[…] but instead work from it in an effort to get my job done. With that came immense style bloat and way too many !important declarations. It didn’t take long for me to realize that something was very […]