How Tasty solves CSS state predictability with non-overlapping selectors and state maps
By
tenphi
A baker's-dozen of insight crammed into one ring.
Summary
The article discusses the fundamental problem of CSS state management, where overlapping selectors with equal specificity cause unpredictable behavior depending on source order. The author shares their personal journey of spending years developing a solution called "Tasty," which uses state maps and non-overlapping selectors to make CSS state resolution predictable and deterministic. The piece highlights how component states in CSS often conflict, leading to bugs that are hard to trace, and presents a systematic approach to solving this through careful selector architecture.
Key quotes
· 3 pulledBoth selectors have specificity (0, 1, 1). When a button is both hovered and disabled, the browser falls back to source order.
That sounds small, but it points to a bigger problem: component state in CSS often works by overlap.
As long as a component has only one or two states, that overlap feels manageable.
You might also wanna read
CSS Wrapped 2025: How CSS Evolves to Handle Logic, State, and Complex Interactions
The article discusses the 2025 CSS Wrapped report, highlighting how CSS has evolved beyond simple styling to handle logic, state, and comple
Smashing Magazine·5mo ago
Understanding CSS Specificity: Comparing Cascade Layers, BEM, and Utility Classes
The article explores the challenges of CSS specificity, comparing approaches like CSS Cascade Layers, BEM, and Utility Classes for better co
Smashing Magazine·11mo ago