When to use the !important property in CSS

What's important about !important?

Remember !important is a powerful tool but should only be used when you've exhausted all other options. This styling bulldozer shines best when conquering specificity challenges. Prep your alternative solutions first. Pump up the specificity of your selectors, it's a known technique to tackle overuse of !important.

#content .button { /* More specific, no !important */
    background-color: blue; 
}


Real-world !important scenarios

Certain situations may call for the !important cavalry. Say, you're battling inline styles added by JavaScript on the fly, !important can be a lifesaver. It's also handy when wrestling with immutable HTML controls on platforms like SharePoint. Temporarily, it might patch urgent styling issues on live grounds before a full-fledged fix kicks in the next update.

/* The !important shield against JavaScript-generated inline styles */
.button {
    display: block !important; 
}


Code review: The !important hotspots

Overuse of !important signal CSS codebase screaming for a cleanup - a refactoring. Aim to write scalable, modular CSS. Take advantage of BEM, OOCSS or SMACSS guidelines to keep !important in the toolbox, not on the field. In the refactoring journey, each !important usage is an opportunity for improvement.

/* 🕵️ Oh! An !important. Let's see, we've got a refactoring case here... */


The !important effect on code hygiene

An !important stamp can muddy up your CSS codebase, making it tricky for future maintenance. Each !important use should be accompanied by documentation, explaining its raison d'être. This way, successor developers won't be left shrugging but have a better grasp about its usage, facilitating future code cleanup.

.button {
    display: block !important; /* Because jQuery plays naughty with our element */
}


Opt for alternatives

Always think twice before resorting to !important. Consider the structure of your CSS, make structural tweaks if possible to avoid !important. If you're up against external widget or library styles, check if they allow configurable CSS classes that could be targeted, thus eliminating overusing !important.

/* Attempted murder of !important.. by restructuring */
.common-button.special-condition {
    background-color: blue; 
}


Zero control over external scripts

Dealing with external widgets or controls? Got limited sway over HTML structure? Here !important can be indispensable to assert your styles. Remember, only employ !important after all options have been exhausted.

/* When plugins turn rebels, !important brings them to heel */
.plugin-widget {
    display: none !important; /* You shall not pass (on screen)! */
}
