Knowing What’s !important

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.