The CSS Important Flag

This post is part of a series on techniques that marked a paradigm shift in the development of my skills.

In CSS, the important flag is used to outweigh other properties of an element even inline styles. With the “!important” flag appended to the end of a given property, that property will take precedence on the styling of the element regardless of the specificity of other selectors in the cascade. In other words, dropping an important flag is like dropping a nuclear bomb on your element.

HTML

<div id="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS

p { margin: 0; text-align: right !important; }
#main p { text-align: left; }

As you can see from the example above, the “!important” flag out weighs the ID selector and styles the paragraph with text-align: right.

In order to maintain a stylesheet that modulular and in coherence with OOCSS and SMACSS, I find it’s best to avoid using IDs and the “!important” flag all together. Sometimes, however, the “!important” flag can come in handy when dealing with third party integretions or even with error messaging.

HTML

<div id="third-party">
    <div class="third-party-widget" style="width: 500px; z-index: 999; position: relative;">
        <p style="font-size: 10px; font-family: Papyrus, script;">Some useful text</p>
    </div>
</div>

CSS

.third-party-widget { z-index: 10 !important; }
.third-party-widget p { font-family: sans-serif !important; }

In the example above, we included a widget from a third party via javascript that outputs some HTML with inline styles. The z-index of the widget is conflicting with some overlays we have set up on the site, and we want to get rid of the Papyrus font because… yuck. We can outweigh those inline styles with the use of the “!important” flag.

HTML

<div class="widget">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="error">Error Message</p>
</div>

CSS

.widget { padding: 20px; color: #eee; background: #333; }
p.error { color: red !important; }

In this final example, we’re using the “!important” flag to ensure that our error messages are always styled properly regardless of context or its position in the cascade.

The important flag is a very handy tool, but like anything else, if used too much or without planning can quickly turn your stylesheet into a war of specificity. Be sure to use the important flag with care.

posted in: Techniques
tagged: ,

Comments are closed