CSS !important Frustrations

As with any other tool there is a time and place to use !important but I confidently say that it is used 99% of the time incorrectly.

!important Explanation

An !important is used to overwrite CSS even if another selector takes priority. Here is an example:

#box {
    color: red !important; /* This takes priority */
}    
#box {
    color: blue;
}

In this example, you could see that color in the first section the color is red and in the second section is blue. Normally, CSS that comes after overwrites what comes before so the box's color would be blue but since we have an !important with the first section it takes priority. That being said, the color of the box would be red.

CSS Specificity

Reference: css-tricks.com
CSS selectors use a simple scoring technique. A selector gets points based on the style attribute, id, class, pseudo-class, attribute, and elements. Here is a quick image to explain:

That being said, if you get 1,0,0,0 (1000 points) it would beat out 0,1,0,0 (100 points). Here are a few examples that CSS Tricks created:

When you use an !important, anywhere in the CSS, you are creating an "automatic win." It is pretty much adding a 1,0,0,0,0 to the mix which could cause some serious issues in your code.

Legitimate Uses of !important

Although I am pretty against using !important there are some situations where it is very useful. Here are a few examples where it is used correctly:

Forcing conditions with a class

.pull-right {
    float: right !important;
}
.pull-left {
    float: left !important;
}
.hide {
    display: none !important;
}
.show {
    display: block !important;
}

Printing Conditions

@media print {
    *,
    *:before,
    *:after {
        color: #000 !important;
        text-shadow: none !important;
        background: transparent !important;
        -webkit-box-shadow: none !important;
            box-shadow: none !important;
    }
}

Email Templates

Email templates tend to have a lot of !importants. This isn't because of an inexperienced developer, its because the world of email template HTML is a world of pain and misery. Its like coding a website with the standards of 1990 and you have to worry about capibilty on 40+ email clients that all behave differently. Sometimes !importants just help a little bit to force a style that you absolutely need.

Incorrect Uses with Child Themes

Now that we have covered how CSS specifity and !important works lets show where the frustration comes from. Every once in while I will get a project that has a ton of !importants in the code and editing the CSS becomes unbeleivable frustating and soon almost every line of CSS written needs an !important to work.

A child theme's stylesheet is supposed to come after the parent theme's stylesheet in the HTML but every once in a while its not and it looks something like this:

<!-- This should've been placed after the parent's CSS -->
<link href="child.css" rel="stylesheet" type="text/css" /> 

<link href="parent.css" rel="stylesheet" type="text/css" />

With this issue already created and the next developer doesn't have the ability to write CSS that comes after the parent's stylesheet they should use the CSS Specificity rules that we covered below but many use the !important as an easy solution. The issue is that they are using the exact same selectors instead of using new selectors that have a high value. Lets use the example from above and put each into different stylesheets:

child.css
#box {
    color: red !important; /* This takes priority */
}    
parent.css
#box {
    color: blue;
}

The better way of doing this would be simily creating a selector that has a higher point value.

child.css
body #box {
    color: red; /* This takes priority */
}    
parent.css
#box {
    color: blue;
}

Conclusion

When it comes down to it, !importants have their uses but 99% of the time they should absolutely be avoided. Using CSS Specificity instead is almost always the better solution.