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!
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
!importanton the css property value.The bootstrap class
d-flexadds adisplay: 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
!importantoverrules everything independent of where it is applied! Something to keep in mind!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!