Before we begin with the facts I need to stress out one thing. If you think that something is important then please treat it appropriately. I am curious to know since when is brute force solution for such cases?
Programmers who write CSS sure know that !important is actually the negation of important.
Now let’s switch to specificity. I mean what is more important to talk about when !important is the topic…
As you may know things do have priorities in CSS. If nothing else that concept is the core of Cascading part of the Style Sheets.
The CSS specification describes a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities (or weights) are calculated and assigned to rules, so that the results are predictable. — Wikipedia
The simplest way to understand those priorities is to learn it in ascending order of importance (where 5th point have the most weight):
- User agent declarations
Default browser styles, such are styles for head { display: none; } or a { … } - User declarations
Any declaration that actual user can modify on browser level. Such is font-size or page zoom… We are talking here about browser configuration. - Author declarations
CSS defined by the page (inline, embedded or external) - Author
!importantdeclarations
Point 3 on steroids. - User
!importantdeclarations
Point 2 on steroids.
I am not here to teach you the ways of the force further on. Am sure that all of you understand principles and importance of the proper structure of your CSS codebase. But I will try to send a clear message. When ever I use !important I feel guilt, spiced with a sense of shame. Since 99.9% of the time it just means that I screwed it up. Either by not planning ahead or by being plain lazy, or in worst scenarios both.
Now let’s get back to the title of this article. Because it sure is about CSS specificity and how some of us use it. Or better say misuse it.
It’s easy to judge other people code, it’s even easier not to fix it in the case when it is an open source project. But as usual, the most judged people are celebrities and is there a bigger celebrity in CSS world than Bootstrap? I guess not. So let’s do some paparazzi work!
As it looks Bootstrap is still very popular! But… version 4 (currently in beta) is two years in the making and I must say that I expected more (or better say less) from it, than this…
Before we start to argue, YES I am aware of this > Why so many !important css declarations? #22815 (and you should be too)
Let’s do some basic math. If Bootstrap has 9320 lines of code than 1320 occurrences of !important make ~14.16% of its codebase.
But… I am going to be honest here, this article is not about Bootstrap (it’s still my go-to front-end component library). It is about the importance of understanding CSS specificity and not accepting its misuse because of… reasons.
Further reading (evergreen oldies):
CSS specificity and inheritance
The important css declaration how and when to use it
Something in Bootstraps defense:
When using important is the right choice
With great power comes great responsibility.
Have that in mind next time you consider using !important and please don’t do it (whenever possible).
If you are reading this it means that you are curious and passionate about JavaScript and Front-End in general. That makes two of us!
Consider joining me on this adventure of discovery by following me here, clicking on that heart, or checking out my twitter account https://twitter.com/develoger
