Why do CSS Frameworks use !important tags unnecessarily?

Question

This is more of a debate than a question but I feel that there isn't a lot on the internet that covers this topic.

For example foundation comes with hundreds of !important tags for things that in my eyes do not need them:

.text-center { text-align: center !important; } 

There is loads of css that is simular to this which in my point of view is bad practise and the question I'd like to answer is why do css frameworks use them at all? Bootstrap and Foundation are two main css frameworks that both use them.

I've always been told that using important tags in css is very bad practise and should only be used for IE.

Answer 1

If you write your own CSS you have the freedom to add more specific rules whenever needed:

.center        { text-align: center; }
.foobar        { text-align: left; }
.foobar.center { text-align: center; }

However, the CSS framework cannot predict how you will arrange your HTML. So it is easier to do !important instead of generating thousands of combinations of more specific rules. Example:

.center               { text-align: center; }
.foobar               { text-align: left; }
.barbaz               { text-align: right; }
 /*
  * assuming .center must be centered regardless of other rules and
  * !important must be avoided at the same time, we need to do this
  */
.foobar.center        { text-align: center; }
.barbaz.center        { text-align: center; }
.foobar.barbaz.center { text-align: center; }

Answer 2

Using !important in your CSS usually means, the classes you have written do not have a proper hierarchy.

The !important rule overrides a particular property. But should be used only when one is helpless and it has to be overridden.

Best practice would be to use !important only in utility classes alone.

eg. Say you have a button which u want to look similar throughout your application

 .btn {
       margin-bottom: 0;  
       text-align: center;
       vertical-align: middle;
       touch-action: manipulation;
       cursor: pointer;  
       border: 1px solid transparent;
       padding: 6px 12px;
       font-size: 11px;
       border-radius: 4px;  
    }

The above definition for .btn holds true unless it is not wrapped by any other class which could override the .btn formatting which we expect to be same throughout the application. But once it is wrapped by other class like below, the final style would be totally different from your expectations.

<p class="format-paragraph">
   <button type="submit" name="save" class="btn"> Submit</button> 
</p>

Now, to make your .btn class super strong and to be treated with respect by the ones wrapping it, change the .btn definition to:

.btn {
           margin-bottom: 0              !important;  
           text-align: center            !important;
           vertical-align: middle        !important;
           touch-action: manipulation    !important;
           cursor: pointer               !important;  
           border: 1px solid transparent !important;
           padding: 6px 12px             !important;
           font-size: 11px               !important;
           border-radius: 4px            !important;  
        }

This definition would be sufficient to make your button look similar throughout the application.

The .text-center { text-align: center !important; } class mentioned in question is nothing but a utility here.

Know more on !important precedence here.

Answer 3

Is because you can have in your code st. like this:

<style>
#aside p {text-align: right;}
.text-center {text-align: center} /* without important text will be aligned to right */
</style>

<div id="aside">
    <p>right-aligned text</p>
    <p class="text-center">centered text</p>
</div>

http://jsfiddle.net/v1v4jaas/

In this case without inportant the text will be aligned to right. With important, the second paragraph will be centered.

Class has only a low priority against id, etc.