Discussion on: IDs vs Classes: a CSS Specificity Chapter

sl4rtyb4rtf4st profile image
Andrew Millar

You forgot to mention "!important".

I had an issue just last Friday when I was trying to apply some style to an element. I needed a display none but the code was being ignored.
I could see the style="display: none" in the code in devtools but the element was still visible.
I was also under the impression that inline css overrules all. But not if there is an !important on the css property value.

The bootstrap class d-flex adds a display: flex !important. I imagine there is a good reason they added the important, even though that is something you should avoid, if you can.

In summery !important overrules everything independent of where it is applied! Something to keep in mind!

lautarolobo profile image
Lautaro Lobo Author

Oh yes!

I totally agree with you, you should use it only in specific cases, and don't overuse it.

This Stack Overflow question got great answers on the topic.

Also MDN has some rules of thumb to know when to use !important.

Thanks for pointing it out!