My top 3:

* Inline styling instead of creating a class.
* slapping the new class at the end of a 700 LOC CSS file.
* Using !important

If you use CSS without SASS

!important does have nice use cases.

@Fast-Nop it does? Can you give me an example?

@rabbi I have a CSS property set by Javascript where the value depends on user interaction, but only in mobile view. For desktop view, the property from CSS shall be used.

Since properties set via JS have priority over those from CSS, I would have to listen on the window resize event and reset that - or I spare that handler and just use !important for desktop view.

@Fast-Nop or use a higher select class, which if you are using scss is very easy.

But you can agree that this is a very specific and special use case, I don't think I would call that a 'nice use case'...

@rabbi !important is meant as exception if used properly, and therefore, the nice use cases of course are the rare corner cases.

What !important is not for, that's including 20 stylesheets all with contradicting definitions of the same classes and then going for damage control with !important.

@Fast-Nop I know. By the way, do you know what css property overrides !important?

@rabbi well you can add !important to a selector with higher specificity , or add an !important override further down the line - but then the order matters, which sucks.

@Fast-Nop no, I mean a property that with the same specifity overrides !important

@rabbi no, I havn't had the need for that edge case so far. Which one is it?

@Fast-Nop keyframes

@rabbi had to look it up - but come on. I mean, aminations ok, but abusing them for overriding !important would be a really dirty hack.

@Fast-Nop my reasoning is that ! important is already a dirty hack, but just in case someone already used it, you have the nukes ready...

@rabbi well, !important is the goto of CSS, but when used with care, it can be OK. The epidemic and dirty use of that probably came from the Wordpress ecosystem (who would have guessed).