! important (which is actually important)

Today I spent some time removing inline css styles for the Trippeo dashboard. It was the first time I had really looked at the !important declaration. I had glimpsed it here and there and naively thought it was similar to a comment, as in “important color, do not edit without careful consideration”… but it is actually like a magic veto power! And…”narcissistic” according to CSS-tricks. To “respect the devs to come” per the article, I set about getting rid of these !important declarations.

I had thought the id selector was the most specific but moving these styles into the css files did not work. The default style was not being overwritten. Hmm. Why were these default styles with class attributes overriding the id attributes? (And apparently selecting by id is not good practice either, oh no!) Time to look at css specificity. Different selectors have varying weights that are calculated? Whoa.

I won the specificity wars by adding more selectors and successfully removed the !important declarations. My new question was, how do you avoid specificity wars as you add more elements to an increasingly large project? Google told me css specificity should be irrelevant if you are following object oriented css principles. Looking up css best practices brought me to Sass and Less. And then I saw lines of code like “@rowstyle” that brought in css styles from I’m not sure where and if {} else {} statements in the html…

Sometimes I feel like….
redpillHow deep does the rabbit hole go?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s