Comments on: Don’t use “!important”

By: Meshach

Meshach — Sun, 12 Apr 2009 21:34:45 +0000

Wouldn’t it be better to do the star hack?

* html #div {
  selector:value;
}

By: Dan Wellman

Dan Wellman — Thu, 02 Apr 2009 11:12:52 +0000

Hi James, great site!

Sometimes !important can be useful for overriding dynamically added inline styles (e.g. like when changing CSS rules with jQuery). That’s about the only time I ever use it, I never put it into a stylesheet 😀

By: Graham B

Graham B — Mon, 30 Mar 2009 20:01:43 +0000

Good advice. Unfortunately Sitepoint’s recent “10 fixes that solves IE6 problems” article specifically promoted the use of !important. One step forward, two steps back.

By: J. Albert Bowden II

J. Albert Bowden II — Thu, 26 Mar 2009 01:01:36 +0000

NICE! I couldn’t agree with you more!

By: Shane

Shane — Sat, 21 Mar 2009 13:39:00 +0000

The CSS is packaged up in the control – you add a reference to your control and the framework automatically puts in the CSS reference after any you’ve put in.

No – in this particular instance, there’s no way around.

By: James

James — Sat, 21 Mar 2009 09:42:03 +0000

@Marin, Mark, I guess that’s another exception. Of course, you could always do something more hacky to target IE6, like:

_height: 500px; /* IE6 */
min-height: 500px;

I’m not sure which approach is better… ‘!important’ may be the better option here, to be honest.

@Shane, that really sucks about .NET. Can’t those “controls” be changed or configured somehow?

By: Mark

Mark — Fri, 20 Mar 2009 19:57:13 +0000

I agree about specificity. I use !important *only* to counteract very few FF/IE7/Safari/Chrome vs. IE6 issues when a CSS reset doesn’t seem to fix the inconsistency. I’ve never had problems with this method.

E.g.
margin: 2px 0 0 3px !important; /* good browsers */
margin: 7px 0 0 3px; /* IE6 only */

By: Shane

Shane — Fri, 20 Mar 2009 14:03:16 +0000

I’ve had to use !important on ASP.NET websites that use custom controls that come packaged with their own CSS.

The control framework inserts markup requesting the control CSS after any CSS you’ve referenced in the head section (whether it’s by referencing a stylesheet or inline CSS – eugh 🙂 ).

The only way to override the controls’ CSS is by using important. It’s not something that I like doing, and this is a specific ASP.NET example, but it’s where I have had to use !important.

By: Marin

Marin — Fri, 20 Mar 2009 08:52:57 +0000

The precedence is well explained with those Star Wars characters:
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Sometimes, you can’t escape from the !important (min-height on IE6) but of course, you need to know what you’re doing.