!important; the bane of CSS.

I was recently equally surprised and relived when I read that the WordPress UI team is clamping down on the !important; rule in Their CSS. A recent post outlines that any use of the !important; rule needs to be raised and approved in their weekly meeting. This is great. We should follow.

I found the !important rule became popular when web developers were working on older software products, websites that used in-line styles as a form of styling. That was the 90′s. I also found high use of the !important rule with lazy and incorrectly trained web developers.

There is nothing more annoying that stacking up a massive CSS selector just to get around an !important rule just so you can make a minor adjustment to some text.

#iNeedAnID #oneMore li.almostThere header nav li{font-weight:bold !important}

So what I like to do is use a Specificity Calculator in times of need, trying to remove !important; rules that look lazy or no longer needed. It is a some what satisfying challenge doing this because the end result is clean code and Web Developers love clean code.

How does CSS Specificity work? Well i’m not going into that so I’ve listed a few links that go into extreme detail about the subject: