Problem:
Sometimes, in CSS, we see “!important”. You want to know what is !important in CSS and how to use it?
Solution:
Function of “!important” –
- Even if the selector is less specific or lower level, “!important” makes it higher specific.
- If there are any statement used further, it won’t override “!important” statement.
Implications of “!important” –
- Overriding styles in a user stylesheet.
It’s generally used to give opportunity to the users to override websites styles. It’s used by accessibility tools like screen readers, ad blockers etc.
- Overriding 3rd party code & inline styles.
There are many cases when you have no option to control over codes and you just have to work with whatever is present. Then “!important” works to fulfill your desire.
Sometimes “!important” is suggested to be avoided.
Reasons not to use/avoid “!important” are-
- It makes the code difficult. Because when you use “!important” the specificity breaks. Then the reader of the code may think it’s difficult.
- It’s a short time solution. It won’t bring solution for a long term.