When CSS is !important

If you are reading this, you know the gist of “!important” is to counter-act the normal application of CSS rules based on selector specificity. One way to look at this is that it’s a shortcut to make up for another rule’s selector that is too broad. Another way would be to describe it as getting things done and moving on. We can argue both ways depending on how much time/budget you have — but more importantly — how many places a given CSS file will be used.

Important situation #1 – it’s just me

Let’s say you have a nicely crafted blog interface, with modern HTML, CSS, and non-obtrusive JavaScript — maybe even a responsive design. For a special post you might want to override a CSS rule to achieve some worthwhile effect once in a while. In this case “!important” might be the fastest way to override the default rule, and it is a one-time use with limited or no tentacles.

Here are a couple examples that I’m not proud of, but are honestly in style sheets I’ve written: 

#subnav li { list-style-image: none!important; }
#search_form button { margin-top: 0em!important; }

Why are these instances of “!important” there? I control the entire project after all. Looks like I chose the “get it done and move on” option, I really can’t remember. There are probably a few elegant ways to remove “!important” and get the same effect from the CSS rules in my interface. Fortunately, it’s just me. For now. What if others start to work on these projects with me someday? This could grow tentacles fast.

Important situation #2 – I’m delivering to (or sharing with) others

Imagine you are authoring a plugin for an open source project and included a CSS rule like this:

#content .button { background: #e5e5e5; color: #444!important; }

That snippet of CSS makes me think the author was thinking one or more of the following:

  1. Somewhere in my plugin the .button class is different than inside #content
  2. Under normal use only my plugin will have markup with an element id=”content”
  3. Nobody should change my gray buttons, gray buttons are important

Here’s my reaction each:

  1. So what, if you are writing the HTML and CSS there is always another way to get a more specific selector without using “!important”
  2. This hardly seems reasonable, now if somebody wants to override your rule they have to include “#content” in their selector
  3. Really? Some designs may not work with gray buttons

The cascade of “!important”

I’m not directly talking about the cascade — rather — the ripples of “!important” that run through a project when you have to undo another CSS rule that is “!important”. This can happen with plugins when the author opts for the “get it done and move on” path in their CSS.

In order to undo the gray button rule, we need something like this:

Gray buttons from plugin-styles.css

#content .button { background: #e5e5e5; color: #444!important; }

Now make blue buttons with my-styles.css

/* Won't cut it
.button { background: #21759B; color: #fff } */

/* Still won't cut it
#content .button { background: #21759B; color: #fff } */

/* Here we go! */
#content .button { background: #21759B; color: #fff!important; }

Imagine an update for one special form with red buttons

#content .redForm .button { background: red; color: #fff!important; }

The user experience of your interface is one thing, but we should probably also consider the user-experience of other developers that install the plugin in their projects.

But this CSS rule is important

Fair enough, it’s just a matter of where and when. Let’s not create work for others when we don’t have too. That is how the world ended up with “Paste from Word” buttons that remove bloated markup and inline styles. There is almost always another way to apply your CSS rule rather than resorting to “!important”. This is especially true if you are authoring the HTML and CSS.

Find, review, and justify your “!important”s

$ grep '!important' style.css | wc -l
   4

Looks like I have four things to make sure of before I commit styles.css no? Maybe a nice commit message would include the rationale for leaving them in.

Ironically, it’s not that important

The implementation of “!important” in CSS always looks a bit odd to me, since “!” is the not operator in many programming languages. The irony that CSS gives more weight to things that are “not important” always gives me a grin.

A CSS rule that comes with “!important” on the tail is almost never important for all uses.

Having said all that, what do you say?

Please leave a comment with any good/bad/ugly uses of “!important” that you’ve been involved with.