When Using !important is The Right Choice

PUBLISHED MAY 22, 2011 BY CHRIS COYIER

Inspiration from Stephanie Rewis:

Using !important in your CSS usually means you’re narcissistic & selfish or lazy. Respect the devs to come…

For those that don’t know, an !important rule works like this:

p {
    color: red !important;
}
#thing {
    color: green;
}

<p id="thing">Will be RED.</p>

The paragraph is will be red, even though the ID selector has higher specificity. The!important rule overrides that particular property.

Stephanie, surely out of frustration, was talking about how postscripting your CSS values with !important can be highly abused and make for messy and hard to maintain CSS. The unfortunate typical use case goes like this:

1. WHY IS MY FRAGGLE ROCKING CSS NOT WORKING INTERROBANG
2. (use !important rule)
3. OK, now it’s working

Then the next guy comes along and tries to make new changes. He tries to alter some existing CSS rules, but now his changes aren’t behaving how they should. He traces the issue back to the !important rules, then has a choice. He can try and remove those and attempt to get things back on track, or add some more of his own to fight them and get his change done. Since he might not know exactly why those !important rules were added in the first place, he might opt for the second option for fear of breaking something somewhere else on the site he’s not aware of. And thus the vicious cycle starts.

Potentially good use case: utility classes

So when is the !important rule actually useful and a good idea? In my opinion, utility classes are a good use case.

Think of “buttons.” Let’s say you have a class name of .button on your site and whatever element you put it on, you want that element to look like a button: specific font, rounded corners, special background and borders, whatever. So you do this:

.button {
   background: red; 
   color: white;
   padding: 3px;
   border-radius: 5px;
   border: 1px solid black;
}

<a href="#" class="button">Do Thing</a>

The specificity for that is 0,0,1,0. As soon as that element has another selector effecting it that has a higher specificity, you may have styling issues. Like:

<section id="content">
   <p>  text text blah <a href="#" class="button">Do Thing</a>  </p>
</section>

#content a {
   border-bottom: 1px dotted blue;
}

Now those buttons you have a specific design for have a dotted blue bottom border, which is not what you want. Here’s a fiddle of that kinda scenario happening.

I don’t think this is the fault of sloppy CSS. It’s easy and often perfectly valid to write a CSS selector that has a higher specificity value than 0,0,1,0 and accidentally screws up a button.

To make your button class super robust and not easily trifled with, put !important rules on the values. And maybe even add in a few that your button doesn’t need but could screw it up.

.button {
   background: red            !important;
   color: white               !important;
   padding: 3px               !important;
   border-radius: 5px         !important;
   border: 1px solid black    !important;

   /* For good measure */     
   text-decoration: none      !important;
}

Any other “utility class” could benefit from this. Think of the popular “clearfix” class, which uses pseudo elements to do its thing. Pseudo elements are becoming more popular and being used for more things, so it would be possible have a selector override the clearfix psuedo elements and have the float clearing fail. Almost certainly not what you want, so adding !important rules to those could be useful.

I even talked to Nicole Sullivan who said she’d be adding !important rules to the spacer classes that she uses in her OOCSS framework, and she’s a hard sell on this idea, since her style of writing CSS actually makes writing selectors with a higher specificity than 0,0,1,0 kind of rare.

User style sheets

I believe the original use case and reason !important rules exist is user stylesheets. That is, a custom stylesheet written by you that you tell the web browser to apply to every page visited. This is particularly easy to do in a browser like Safari. Preferences > Advanced > Stylesheet and select one. In this user stylesheet, you might do things like hide comments, hide ads, or attempt your own readability improvements by settings colors and sizes on fonts.

Since these styles apply to all websites, not specific websites, you’ll need to write fairly generic selectors that are the most likely to apply to all sites, like body { }. But a selector like that has very low specificity (0,0,0,1) and is likely to be beaten by a websites own styles. And so, !important rules allow you write generic selectors but still have the power to change things.

Others?

So what about you folks? Got some use cases for !important you think are solid? I’d be interested to hear.

The post When Using !important is The Right Choice | CSS-Tricks appeared first on ENGAGE Tech Blog and News | Engaging the World.