April 23, 2026
Hover Cage Match
I spent years trying to make CSS states predictable
Dev says he fixed the “hover vs disabled” mess — commenters split between “finally!” and “stop the hacks”
TLDR: A developer launched “Tasty,” a tool that makes button and theme states apply in a clear order so styles don’t clash. Commenters are split between relief at ending cascade chaos, skeptics who fear another heavy tool, and purists yelling to ditch abstractions and write plain CSS—why it matters: fewer style bugs.
A front-end developer says he’s done being bullied by the “hover vs disabled” button drama and built a new tool, Tasty, to stop style chaos. Instead of fighting over which rule wins, Tasty lets you list states (like hover, pressed, or disabled) in plain priority, then compiles non-overlapping rules so only one look can apply at a time. Translation for non-coders: it promises to end those weird moments when a “do not click” button turns bright blue because the mouse is over it.
But the comments are where the show begins. The creator shows up saying he’s “happy to take questions,” while one thoughtful skeptic warns this may be “utility direction possibly too far” and wonders how it scales when many styles collide. A purist storms in with the all-caps energy: “program the damn machine,” arguing that every layer on top of plain CSS just makes new problems. Comic relief arrives with a user bragging, “I just increase the specificity as needed,” then jokingly piles on absurdly long selectors—basically CSS duct tape. Another fly-by quip — “Probably because you aren’t using Sin” — becomes the thread’s mystery meme. Bottom line: half the crowd wants a referee for CSS chaos; the other half says stop inventing refs and learn the rules.
Key Points
- •The article identifies CSS state overlap as a source of unpredictable behavior due to equal specificity and source-order reliance.
- •It proposes expressing component state priorities declaratively and compiling them into deterministic selectors.
- •Tasty compiles state maps into non-overlapping CSS using :not() exclusions to enforce priority.
- •This approach eliminates cascade conflicts and simplifies extending components without re-deriving selector logic.
- •The benefits are most evident in complex cases involving dark mode, media/attribute sources, container queries, and variant interactions.