#shame.css

!important is a CSS exception that forces the current property's value to be used instead of any-other declaration of the same property, independent of the rules of CSS specificity.

Meaning that whatever you declare as !important, is applied no matter what any-other CSS rule says.

You can use it by adding !important at the end of your CSS property declaration, right after the value, like:

selector { property1: value1 !important; }

For example, if you'd like the browser to hide elements with the class hide, no matter what, you can use:

.hide { display: none !important; }

Now, every element with the class hide will have it's display property set to none and therefore be hidden, even if the individual element has a more specific display property, like with it's ID as the selector or with an inline style saying otherwise.

Why is it bad?

The key argument against using !important is that it makes maintaining and building upon your CSS, very hard by the fact that it cannot be overriden by anything other than a more specific !important statement.

Keep in mind that whenever you feel the need to use !important, there is almost always another way.

When to use it

That said, there are a few, extremely rare cases where using !important is the best option available. Let's look at a few of those:

Overriding styles inserted by third-party JavaScript

Some third-party JavaScript plugins that you use may style your elements, but fail to provide an API that allows you to customize those styles - in most such cases you'll probably have no other go but to use the !important declaration to override those styles with your own.

Overriding a !important declaration in a third-party stylesheet

Because a !important declaration can only be overridden by a more specific !important declaration, it becomes your only option when you have to work with a third-party plugin that uses !important

In classes that are designed for a clear & specific purpose

Like the hide class we looked at earlier, where the only reason we'd be using it is to force the element to hide, it may be alright to use the !important declaration, given that you don't use it on a property that could be inherited by it's children.

Doing it right

If you ever find yourself in a situation where you have no other option but to use !important, here are a few guidelines that could help you use it without killing maintainability:

Be as specific as possible

Make sure you use selectors that target as few elements as possible, ideally just the particular element that you are trying to affect. So, prefer to use the ID selector or a unique class, along with child selectors, as required.

Don't use it on properties that could be inherited

Using !important on an inheritable property like color or font would mean that you cannot change it on any of the element's children, unless write another, more specific !important declaration to that effect, making it much harder to customize it. Look through the CSS reference to check if a property is inheritable or not.

Put it in a separate stylesheet

Since using !important is bad for maintainability and given the fact that there is almost always some way to avoid it, it might be a good idea to put it along with the rest of your CSS hacks, in a separate CSS file, so that you can easily replace it as and when you discover a better way to do the same. Read more about why having a separate CSS file for hacks is a good idea.

Conclusion

Whenever you feel the need to use !important, keep in mind that there is almost always a more specific rule that you could be using instead, so for the sake of the poor dev who'll be building upon your CSS a few months from now, it is !important that you do your very best not to use it.

Further Reading:

CSS Specificity on MDN

Common CSS Questions on MDN

!important on SmashingMagazine

When Using !important is The Right Choice on CSSTricks

Shame.CSS

such a great idea! I'm guilty - facepalm ;)

The problem

We all know that, no matter how hard we may try, sometimes we do need to use quick fixes, hacks and questionable techniques in our code. It happens, whether we like to admit it or not.

From using a quick overflow:hidden; instead of working out what’s actually broken our layout, to the odd !important to override some poor CSS, there are often times where we need to use less than ideal CSS in order to meet deadlines, to get something working, or to fix pressing—or even live—bugs.

Whilst this isn’t ideal, we have to do it from time to time; all of us.

The real problem, though, is that we rarely go back and tidy these things up. They slip through the cracks, get ignored, go unnoticed, and stay for good. This we do not have to do.

...

The solution

The idea of shame.css is that you have a totally new stylesheet reserved just for your hacky code. The code you have to write to get the release out on time, but the code that makes you ashamed.

By putting your bodges, hacks and quick-fixes in their own file you do a few things:

You make them stick out like a sore thumb.

You keep your ‘main’ codebase clean.

You make developers aware that their hacks are made very visible.

You make them easier to isolate and fix.

$ git blame shame.css.

If anyone has to add a quick hack, they add it to shame.css, this means that they’re putting their hacks out there in the open; it means that they are aware that what they’re doing is hacky, it forces them to document what the problem was, how the hack fixes it, and how they might fix it for real given more time.