Overriding inline styles is a common one. They could come from third party libraries or your own computations, but in certain conditions you might want to add a constraint. Examples:
a normally draggable box that you don't want to move in a certain state;
a JS-driven animation that you don't want to happen if the user prefers not to.
This could be imperatively done in JS, but also declaratively in CSS.
Another case could be semantic classes. For example, .uppercase { text-transform: uppercase !important; }, or .hidden { display: none !important; }. Sure you could do without the modifier, but then those rules stay subject to the usual cascade and they could be overridden while you want to express a strong meaning instead.
You wouldn't declare something like .error { color: maroon !important; }, as you might want to choose another color (e.g. for a better contrast in a dark theme).
On the other hand, there could be different ways to create certain results, and with different accessibility values. You could render the text in uppercase by changing the font, or "hide" something using position: absolute and a negative z-index, maybe. But that would be still seen by a screen reader.
In the end, even in these cases using !important is debatable. Good CSS systems and conventions can make our lives easier.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Overriding inline styles is a common one. They could come from third party libraries or your own computations, but in certain conditions you might want to add a constraint. Examples:
Another case could be semantic classes. For example,
.uppercase { text-transform: uppercase !important; }, or.hidden { display: none !important; }. Sure you could do without the modifier, but then those rules stay subject to the usual cascade and they could be overridden while you want to express a strong meaning instead.You wouldn't declare something like
.error { color: maroon !important; }, as you might want to choose another color (e.g. for a better contrast in a dark theme).On the other hand, there could be different ways to create certain results, and with different accessibility values. You could render the text in uppercase by changing the font, or "hide" something using
position: absoluteand a negativez-index, maybe. But that would be still seen by a screen reader.In the end, even in these cases using
!importantis debatable. Good CSS systems and conventions can make our lives easier.