In this tutorial we are going to take a look at why and how you should avoid using !important in your custom CSS.
Poor practice
Using the !important rule in CSS is generally considered to be bad practice because it overrides all other styles, regardless of their specificity. This can make your stylesheets difficult to maintain and can cause unexpected behavior in your website. Instead of using !important, you should take advantage of specificity to control which styles are applied to an element.
Avoiding !important by using greater specificity
CSS specificity determines which styles will be applied to an element when multiple style rules target the same element. It is calculated by assigning a numerical value to different parts of a CSS selector. The more specific a selector is, the higher its specificity value and the more likely it is to be applied to an element.
For example, a style rule with an ID selector will have a higher specificity value than one with a class selector, and a style rule with multiple class selectors will have a higher specificity value than one with a single class selector. In cases where two style rules have the same specificity value, the one that appears later in the CSS file will be applied to the element.
Instead of using !important, you can increase the specificity of your CSS selector so that your rule has precedence over the styles you are trying to overwrite.
For example, by having 4 class names in your selector, if the rule you are trying to overwrite has three class names. This works even if the class name is the same, repeated a few times.
For instance, Elementor often generates this kind of CSS ruleset. This example is from a heading element.
.elementor-10630 .elementor-element.elementor-element-67519c1 .elementor-heading-title {
color: #FFFFFF;
font-family: "Roboto", arial;
font-size: 3.5rem;
font-weight: 900;
letter-spacing: 1.8px;
}
As you see, it has 4 class names. If you are trying to overwrite the color of this heading with the following:
.custom-class .elementor-heading-title {
color: #444444;
}
It won't work because you only have two class names, and the rule you are trying to overwrite has four. You would be forced to add !important here, but there is a better way:
.custom-class.custom-class.custom-class.custom-class .elementor-heading-title {
color: #444444;
}
While it looks a bit peculiar, it is fully valid CSS, and a better option than !important. As you now have a total of 5 classes in your selector, even though one of them is simply repeated four times. And you successfully avoided using !important.
Conclusion
In summary, using !important in your CSS is generally considered to be bad practice because it overrides all other styles and can make your stylesheets difficult to maintain. Instead, you should take advantage of specificity and use more specific selectors, group related styles together, and use the cascade wisely to control which styles are applied to an element.
Learn much more about this in the CSS course for Elementor users' CSS Cascade and CSS Specificity chapters.