Disallow !important

Rule from css under compatibility category

What is a trooper!

we have submitted your edit to the community for review! We'll review and make it live on the site in the next few hours, the internet thanks you :).

Browse another section of the knowledge base

Suggest an edit


This rule has no content... yet.

Add content to this rule

Or just browse to view rules that have content


CSS selector specificity determines which style declarations are applied to a set of elements and in which order. Use of the !important suffix allows for overriding of this application order (and the regular source-ordering of CSS interpretation) for any given selection of elements. Uncontrolled use of this language feature can render a stylesheet unmaintainable, forcing developers to compound their use of !important.

.just .specific .enough {
    text-align: right !important;
    /* this declaration applies even though 
       the selector (below) is more specific */

.a .crazy .ultra .super .specific .selector {
    text-align: center;
    font-weight: 600;

   instead, you could do something like...

/* we reduced the specificity of this selector */
.a .super .selector {
    text-align: center;
    font-weight: 600;

/* the specificity of this selector is now equal to the one above
   allowing the style declarations to comfortably override */
.just .specific .enough {
    text-align: right;

How do I fix this ?

Refactoring must be performed on the stylesheet in question. Programmers should aim to reduce the overall specificity of selectors throughout their stylesheets and to honour CSS's normal source-ordering principles.


Browse another section of the knowledge base

Signup icon
Ready to see how well your site scores?

Passmarked works best when you have an account. It allows you to keep a dashboard with saved data of the sites you have run through the system, we’ll alert you about important updates and you get access to the Passmarked Slack forum.

Sign up to get started