Tag Archives: cascade

The non-importance of !important

Molly Holzschlag raised a good issue via Twitter yesterday regarding the !important rules in CSS, reprinted here in more or less the order in which her tweets appeared thus far:

TwitterPoll: What does this mean to you? !=

TwitterPoll follow-up. What does this mean to you? !=good

TwitterPoll: Let’s remove the equal sign. What does this mean to you !good

yes, yes, I’m asking ultimately how the fuck !important means BANG IMPORTANT when realistically it should mean not important.

re: !important in CSS? Kill it. Specificity to the rescue.

Say it ten times fastL Specificity, specificity, specificity. Forget !important. Write specific selectors sez me. And night night!

I love Twitter. When it is up and running that is… πŸ˜‰ Such a lively place for discussion.

Random photo of Taroko Gorge from my recent Taiwan trip, just for color.

Molly makes an excellent point here. My little position with the !important rule is that I always thought this to be somewhat of a funny-looking construct. It is just as Molly points out – the exclamation point preceding the word ‘important’ is odd, kind of stuck on there, and is especially confusing to those of us coming from that programming background where the ! means ‘not’ – as in != reading ‘not equal’ and that sort of thing.

The construct itself is generally frowned upon in production-level CSS code. The specificity of the !important rule overrides anything with normal inheritance values, and if your code is littered with it then you really need to go back and look at what your rules are doing with regards to the cascade. A good production stylesheet should be free of any !important rules.

I take from Molly’s tweets that she argues in favor of abolishing the !important construct and that people should use the cascade properly. While I understand this position and agree with it on a philosophical level, I think somehow this functionality should be retained. My proposal is as follows:

  1. Change !important to just important, doing away with the confusing exclamation point and instantly making CSS more legible
  2. Make some declaration that user agents should ignore the exclamation point and really just pay attention to the word “important,” for the sake of legacy support. Yeah more detail is needed here, but you get it.
  3. Make validation issue an explicit warning stating that important should only be used for debugging purposes.

How this would look in the wild:

#hyrule {
  color:blue important;

Not a big change really, but it gets rid of the somewhat confusing exclamation point, gets us more towards the ideal which is reduced abuse of the rule in question, and promotes better use of the cascade.

Yes that photo is completely random given the context of this discussion, but I thought it was pretty and it reminds me that I need to do a follow-up on my recent Taiwan vacation… πŸ˜‰