Aarghh! #css law: Thou shalt never use !important, except in very specific cases:
To find out if you have a specificity problem you can temporarily add !important to a declaration. If it's now applied, you know you have a specificity problem
.... the one I forgot. I posted this same question a while ago, and someone came up with a second legitimate use case for !important, but what was it?
@ppk important is designed to protect general-but-essential styles from otherwise higher-priority layers, origins, specificities.
Could be good to use in custom-elements for essential shadow-defined defaults, or important 'resets' like [hidden] or :focus, or in low broad cascade layers when a higher layer should not be able to override certain things.
The key is using it protectively, rather than aggressively.
@mia ... yes ... I'm slowly starting to see that. Problem is that I can't give readers examples because they'd go deep into CSS architecture, which the book hardly treats.
@ppk yes - hard to explain the cascade without talking about big architecture. I think that's one reason people have never fully learned either: how the cascade works in depth, or how to architect css well. They're the same issue.
@ppk I've recommended !important in web component stylesheets for :host styles in the past (but they're not going to win against external !importants so 🤷♀️).
you're working on an application and don't have access to change the generated inline styles (usually some YAML-based foolishness) or even just don't have access to all of the stylesheets
You're a user and want to generate your own stylesheets (for fun and/or accessibility)
@ppk Was going to say override style attributes but since you mentioned it was about author stylesheets I am going with overriding something like media/container queries?
@ppk, it's been years when I worked directly with CSS (damn Tailwind), but I also enforced the rule to not style by an ID due to specificity issues. My rationale was that someone might add !important to the ID as well, and then I'm cooked. Hence, this conflict was not possible.
@dbaron No, it was definitely in author style sheets.
And I'm going to come out and admit that I don't really understand the context step of the cascade. (Or the transition part of Origins and Importance.)
@ppk@dbaron I was once at a wonderful conference, I just don't remember its exact name... Something along the lines of Styling Day or CSS Yay! or similar. Anyways, there was a fantastic talk on that subject by @bramus on the CSS Cascade which did an amazing job at explaining it.
Maybe you meant how !important works in relation to the new @layer? My other guess is that only with !important you can override a keyframe animation.
@ppk Not sure if this will clear anything up, but: The context step is relevant to the selectors defined in https://drafts.csswg.org/css-scoping-1/ (and also, if we ever get to standardizing pieces of user-agent shadow DOM, probably also to pseudo-elements that select elements in standardized user-agent shadow DOM). It works just like the origin step, but a level weaker.
@ppk The transition part of origin and importance is the way it is because (a) transitions occur between two styles that we know already won the cascade and (b) we want the transition to be able to operate on any such style, even if it had/has !important on it. (What I'm not sure is whether all engines have caught up to the spec in terms of not implementing animations the same way; animations don't share property (a) so they don't work the same way.)
@dbaron Thanks! Transitions are clear now - or at least, I now know how to test them.
As to animations, in my tests they sort-of behaved as I expected given their place in the origin, but I'll test them some more after I've understood transitions.
@bramus@ppk@dbaron Haha I was confused looking at this for a moment until I realized it had opened in my safari browser and was using custom built-ins. 🙃
@blemmie This is interesting, and I didn't know that article, but it relies on people understanding what utility classes are, and I wasn't planning to delve that deeply into CSS architecture.
@ppk I also once attended a talk where I believe they made the case for !important from a performance point of view, but my memory fails me on that one.
Add comment