In previous articles I’ve been through the entire CSS hierarchy, from UA stylesheets to inline styles, showing how presentational rules become more powerful (but at the same time, less efficient) the closer they came to the element(s) they affect.

This can lead to a design conundrum: what if we want to overrule an inline style with a linked style sheet? The traditional – and correct – approach to CSS says that this can’t be done. Using an inline style like the following:

<p style="color:red;">Ash nazg durbatulûk, ash nazg gimbatul…

…the paragraph will always be red, even if you have a linked stylesheet that says the opposite:

p { color: green; }

Under normal circumstances, the inline style will always take precedence. There is only one way around this limitation: adding !important after the value we wish to insist upon. This makes it an “absolute” rule: when !important is used, its associated property and value will overwrite all other contradicting CSS, wherever it may be. This makes !important rather like the One Ring: very powerful, but deeply corrupting.

By writing !important immediately after the value in the embedded or linked stylesheet and before the semicolon, we can force that rule to take precedence over all others:

p { color: green !important; }

If you’ve never heard of !important, it’s a good sign: you’ve probably been using CSS correctly. !important inverts the entire hierarchy of CSS. As such, the property should be avoided whenever possible: it subverts the flow of your style rules and makes your CSS a lot harder to understand or modify. That being said, there are a few scenarios in which its use is appropriate; the most common is to override inline styles that you cannot otherwise change.

A Practical Use Of !important: Overriding Inline Styles To Create Fluid Images

Let’s say you have a series of banner images in a web site that are all a set dimension. Being a good developer, you’ve probably added an inline style to the images:

<article>
	<header>
		<img src="blue-mosque.jpg" alt="Photograph of the Blue Mosque, Istanbul" style="width:768px; height: 223px;">
		</header>
…
</article>

Now you want to make all of these banner images completely fluid, in order to be part of a responsive design. That is, the images should now use max-width: 100%. The obvious choice – altering the inline style for every banner image on every page - would be laborious and time-consuming. The more efficient option is to control all the images from a linked style sheet, by using article header img { max-width: 100%; }

That works, but only to a point: the header images will scale horizontally, but not vertically, and adding max-height to the new rule will not work in the way you might expect.

We need to blow away the explicit inline height on all the article header images and replace it with height: auto. The problem is that trying to do so in a linked or embedded stylesheet won’t work: the image’s explicit inline style will always take precedence.

The solution is to use !important:

article header img {
	max-width: 100%;
	height: auto !important;
}

Now, contrary to standard CSS rules, the inline height rule will be ignored, and the linked rule followed instead, transforming all of our banner images into responsive elements without time-consuming find-and-replace editing or hand-coding.

The overruling of inline styles – either declarations left over from legacy code or imposed from another source – is one of the few valid uses of !important. How often should you use it otherwise? Almost never. In nearly 20 years of web development, I can count the number of times I’ve done so on one hand. !important is the “nuclear option” in web design: you don’t ever want to go there, but when you absolutely have to, it’s often the only tool for the job.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.