CSS !Important: What It is and When to Use it

One of the most useful and contentious elements of CSS is the !important property. Every designer will come across the tag in CSS code at some point. The real question and dilemma that comes up when that happens is “was it used correctly?” Because CSS !important is such a powerful tool, developers and designers need to be aware of best practices when using it. CSS !important can lead to all kinds of spaghetti code, and that’s not good for anyone.

What is CSS Important?

The !important property in CSS indicates that whatever rule to which it is attached takes precedent over other rules. It is the top priority for the element and selector its used with, and therefore lets developers and designers have specific control over styling for individual parts of the site. In most cases, that means overriding the default styling for the site that’s contained in styles.css or custom.css.

Each instance of !important only applies to the specific line on which it appears. So you can use the property on some, but not all, parts of a snippet. The CSS code for !important looks like this:

.example-class {
	color:#fff!important;
}

The primary thing to remember with !important is two-fold:

1. the word important must always be preceded by an exclamation mark (!)
2. the semicolon must always be at the end of the line, after the !important declaration

!important can even be used on a page-by-page or module-by-module basis (in the case of page builders like Divi), if you want — though that’s how you get into the spaghetti code of what’s overriding which element on which page and in which order?

Every designer at some point or another will run across the CSS important tag and have to make a decision. Is this worth overriding the site’s default styling?

Sometimes, the answer is a resounding yes. Other times, it’s a hard and fast no. Let’s look at some best practices with CSS important to know when it probably won’t break anything, either now or in the future.

When to Use CSS Important

The primary (and most widely accepted) use of !important is when you want a class that interacts with a primary selector to be styled differently. Perhaps you want the title heading and meta information on your blogs to be a different font and color than you do the rest of your site. The default styling for these elements is inherited from the h1 and p selectors in your CSS files. Whatever you have set for the site defaults in either your .css files or the WordPress theme customizer will display.

p {
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #111;
	font-family:'Roboto';
}

h1 {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #000;
	font-family:'Lato';
}

You can change the individual elements you want (blog post title and meta info) with the classes .entry-title and .post-meta. And since you want them to still inherit some of the styles from the parent h1 and p, you’ll use h1.entry-title and p.post-meta to call these specifically.

h1.entry-title, p.post-meta {
	color: white!important;
	font-family:'Poppins'!important;
}

Having these snippets in the same stylesheet will cause the top code to take effect in all cases except for when Post Titles and Post Meta are displayed. The CSS important property overrides the default and lets you have fine control over it.

This kind of individual customization is the primary use of !important. But not the only one.

Use CSS Important to Protect Classes, IDs, and Elements

You can also use !important to future-proof various elements of your page, too, that further development on the site could tweak in unexpected ways. You could, for instance, develop a particular style for subscribe boxes or email opt-ins or YouTube embeds. Each one of these might inherit different styles from your stylesheets in different places. Using the !important tag can make it so that it takes a deliberate hand to change the styling of your forms or buttons.

Just name the element with a class or ID, and then put !important on each and every line.

.youtube-embed {
	font-family:'Exo'!important;
	font-weight: 700!important;
	line-height:1.4rem!important;
	margin-top:25px!important;
	margin-left:auto!important;
	margin-right:auto!important
	color:#449928!important;
	padding:11px!important;
	background:#998899;
}

Voila! Future-proofed from regular changes in your stylesheets.

Using Inline Styles

This is one of those use cases that may or may not come up for many people. It used to be very common, but it has become less so as we’ve moved away from hand-coding our posts and pages. However, if you ever dig into the HTML of a Gutenberg block or the text view of the WordPress classic editor, you can absolutely use !important with in-line CSS styling.

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now!</p>
</div>

This is important for a couple of reasons. The first being that you can control any line of code in your page specifically by using style=”x:y!important;” and the second is that you can override any CSS already applied to that page. Even if that value has !important, too. For example:

<style> 
	p { 
	    color:#313373!important;
	    font-size:2rem; 
	} 

    </style> 

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now, even though there's another !important tag
		applied to the paragraph selector on this page!</p>
</div>

Even if there is embedded HTML styling using <style></style> that uses !important on the same selector, the in-line CSS that targets the specific paragraph will be the one that renders.

Beware of Stacking Important Tags

Let’s take those last couple of examples and issue a word of caution. These types of uses are fine in small doses. You can use them one-off situations, and no one will probably ever have an issue with it. Because, as a one-off, you have specifically used !important to style an individual element. Which is what it is intended for.

However, if you begin using !important as a crutch, as a way to avoid editing your stylesheets as often or as a quick-fix for multiple issues on the same site, that’s the beginning of spaghetti code. Especially for future devs that aren’t you. While you may have a hard time figuring out the order in which the !importants render, a future dev may find it impossible.

What happens eventually is that there are so many stacked !importants across the site that interact with multiple stylesheets, pages, and modules, that normal CSS rarely renders. And sometimes, even something flagged !important doesn’t render. Or worse, every change afterward has to be flagged !important just for it to show up, unless you want to tear down the site’s styling and build it up again.

Wrapping Up

CSS important is honestly one of the most powerful tools in a designer’s toolkit. You can easily adjust any element on your site without worry of affecting any subordinates or peers. But if you overuse it, the effects can cascade into a nightmare of pages and elements trying to override each other, and what was once important has become the default, but it can’t be set as the default. So try to use !important sparingly, so that when you do need something to stand out or be future-proofed, you’re doing it the right way.

How do you feel about using CSS !important in your projects?

Article featured image by wan wei / shutterstock.com