In this series, we share quick tips for developers to make their code more accurate and efficient.
Today’s Developer Tip Of The Day: CSS
What is CSS?
CSS stands for Cascading Style Sheets. Essentially, these are set of rules which describe how an HTML element looks on a page.
What tip to follow?
By default, these rules have a certain “inheritance” mechanism also known as CSS Specificity Rules, which allows the browser to calculate what is the ‘final’ look for any element. By using !important, you override all those calculations, thereby losing the ability to extend your styles within your website.
What happens if you don’t use this tip?
Often, developers use them as a shortcut but as the complexity of the site grows, it leads to unexpected changes in style, leading to a poor UI experience for the end-user, not to mention that heavy investment of time and effort to backtrack and fix the problem for the developer.
What happens if you do use this tip?
Simply put, remembering NOT to use !Important in CSS retains the CSS Specificity Rules, making your HTML element appear consistent throughout the site. It also makes the code scalable for future updates.
Are there exceptions?
Yes. As with most tips, this tip has exceptions too. And this one is an obvious exception. You use !Important in CSS when you consciously want to override all specificity rules. These circumstances are few and far between and need to be thought through very carefully by the developer before making the choice to override.
From the Team @ WukiLabs