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

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.