The use of !important in your CSS might indicate to some that you don’t respect the rules, that you’re selfish and egotistical or just plain lazy. This isn’t necessarily true!

In case you don’t know, this is how the !important rule functions:

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

The result is that the paragraph will display in red despite the higher specificity of the ID selector, because the !important rule takes precedence.

A concern when using !important is that you’ll end up abusing the rule and end up with CSS that is muddled and tough to maintain. Here’s a typical example:

This works at the time, but the problem arises when someone else comes along and attempts to change some of the CSS rules that are in place. He thinks he’s got it all right, but then he finds that his changes don’t work right, and eventually he discovers that the !important rules are creating problems.

At this point he can either remove all of the interfering commands and hope to set everything right, or he can add his own !important rules to force the changes he wants. Because he’s not sure just what changes the original !important rules are making, he’s likely to opt for the second option, cluttering up the CSS with even more rules that others won’t be able to decipher.

Utility Classes

Is there ever a good time to use !important? Yes, in some cases, such as with utility classes. Consider that your site has a class name of .button and whatever element you use this on should look like a button, utilizing a particular font along with special borders, rounded corners, a specific background, etc. To create this, you enter this:

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

This has a specificity of 0,0,1,0. The moment the element encounters another selector with a higher specificity, you’re likely to have styling problems. For instance, this:

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

The above causes the buttons to have a blue dotted bottom border. Not the look you want. The change is valid in the context of the CSS; it’s not sloppy but was put in for other reasons, inadvertently affecting a button. You can prevent this by using !important rules for the button values. Include rules that will prevent your button from being accidentally altered. Like this:

.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;
}

This practice could benefit just about any utility class, such as ‘clearfix’, which makes use of pseudo elements. Since the popularity of pseudo elements is increasing it becomes more and more possible for a selector to override these elements, causing the float clearing to fail. Using !important rules can prevent this.

User Style Sheets

The main reason that !important rules even exist is for user stylesheets, rules that allow you to make improvements to a page’s readability, hide ads, and other changes. These styles need to be pretty generic, since they’ll need to work for all sites, not just certain ones.

Since your selector will likely have a low specificity, the use of !important rules allows for generic selectors yet also gives your stylesheet to make changes.

Thanks for stopping by and please take a look at some of my guides to the best web hosting.