Why does bootstrap use '!important' for responsive classes?

Question

Bootstrap responsive utilities are all using !important, which doesn't make much sense to me. And it doesn't do inheritance like col-xx-xx does. I'd like to know why they added !important for these classes. Someone mentioned it was for specificity. What does that mean? In addition, show and hide classes seems to use !important as well. Why?

Answer 1

While using !important is rarely a good idea as you noticed yourself, since it is a pain to overwrite without using !important yet again, I believe TB has a good reason for doing this for the responsive utilities.

If you state that you want e.g. a button to be not visible on e.g. small displays, by setting the hidden-sm class to that button, you never want it to be visible on small displays. If you would not use important on that utility class, and you would e.g. want a block button on all the other display sizes by adding .btn-block class, your button would become visible again on small displays, since the .btn-block sets the display property back to block. Or at least it could, depending on the order of things, since .hidden-sm and .btn-block have the same specificity when it comes to the cascading rules of css.

Nothing much you can do about that without the !important statement. So this is one of the edge cases where you would have to use it to guarantee the correct behavior.

But you are right in questioning this, !important should only be used as a last resort!