Importance of !Important in CSS
!important is the most common tool for many web developers who want to override the default css styles and implement their own rules. Many developers want to override the css given by some frameworks or some plugins and implement their own and in that process sometimes they end up causing troubles to other developers who are working on the same project.
Consider an example where the developer wants to increase the width and height of the button, most of the developers will increase the padding of the button. It’s a good way to do that, but the most important thing that most web developers will miss is how we apply the rule.
e.g..btn{padding: 10px 40px;}
But sometimes this won’t work, because a default padding is given to the button by the bootstrap and our css will not be applied on the button. To override the default css and apply our rule many developers used !important in the css. And the rule will look like this:
.btn{padding: 10px 40px !important;}
This will give us the desired result, and it looks perfect, but when another developer works on the project on different parts of a website. The developer might see that the button should not be given this much padding with respect to that screen. So he gives a different padding to that button and the rule will look like this
.btn{padding: 10px;}
But this rule is not applied on the button, so the developer will add !important so that it will take the changes. And the new rule will look like this
.btn{padding: 10px !important;}
So now, two developers have added different styles to the button and both have used the !important for their rules. They are even unaware of the problems they have caused. When they visit other pages they might see that the different padding is applied to different buttons and they both start to blame each other but at the end they both try to override the default padding given to the button by the bootstrap and in the process they also end up overriding each others css.
The main reason for how this mess is caused is because the rule is applied on the btn class which bootstrap uses on all the buttons adding any rule on that class will affect all the buttons of a website. So instead of adding our css directly to the btn class we can use css selectors to apply the css. For those who are unaware of the css selectors can look in the link for more details.
We can use parent-child selector to apply the rule, like if the button is inside a div which has the class of button-wrap we can write the css rule as given below and using this technique we don’t need to rely on the !important to apply our rule. It will automatically override the padding given by the bootstrap. And our rule will apply to only those buttons whose parent div has the class of button-wrap.
.button-wrap .btn{padding: 10px;}
This way we can avoid overriding other developers css rules.
Now, let’s see which css rule will override which one. Consider, we have two css files one is main.css & other is home-page.css.
main.css.btn{padding: 10px !important;}home-page.css.btn{padding: 40px !important;}
It all depends on the ordering in which the css files are imported. So if the main.css file is imported first & home-page.css is imported later on. Then 40px padding is applied. Here the home-page css class will override the main.css class rule.
i.e.<link rel="stylesheet" href="css/main.css"><link rel="stylesheet" href="css/home-page.css">
If we reverse the ordering, then 20px padding is applied. Here the main.css class will override the home-page.css class rule.
i.e.<link rel="stylesheet" href="css/home-page.css"><link rel="stylesheet" href="css/main.css">
