Managing CSS states—the visual appearance of elements across different user interactions, device states, and application conditions—remains one of web development's most persistent challenges. One developer's multi-year effort to create a predictable system for handling CSS states has reignited discussions about the fundamental limitations of CSS and the best approaches to overcome them.
The Core Problem
CSS was originally designed as a simple styling language for static documents. However, modern web applications demand complex, interactive interfaces where elements must visually respond to dozens of different states: hover effects, focus states, disabled conditions, loading states, responsive breakpoints, theme variations, and more. Managing these states predictably has proven surprisingly difficult, leading to common issues like style conflicts, specificity problems, and inconsistent behavior across components.
The developer's initiative emerged from practical frustration with existing solutions. As applications grew more complex, maintaining consistent styling across all possible states became increasingly error-prone. Different team members might apply styles in different ways, leading to unpredictable results and difficult-to-debug issues. This is not a niche problem—it affects developers across the industry working on anything from small marketing sites to large-scale applications.
One Perspective: CSS Needs Structural Solutions
Advocates for fundamental CSS improvements argue that the language's current architecture is inherently limited for modern state management. They contend that problems stem from how CSS handles specificity, inheritance, and the cascade itself. These developers believe that building workarounds and utility frameworks, while helpful, merely paper over deeper issues.
Proponents of this view suggest that proper solutions require either substantial changes to CSS itself—such as improved scoping mechanisms, better state handling primitives, or more explicit dependency systems—or adoption of CSS-in-JS approaches that leverage JavaScript's more predictable programming model. They point out that developers have spent years building frameworks and methodologies (BEM, SMACSS, Atomic CSS, etc.) precisely because CSS lacks native tools for managing complexity.
From this perspective, the multi-year effort to make states predictable reflects a broader truth: the investment required to work around CSS limitations suggests those limitations deserve direct attention rather than continued workarounds.
The Alternative View: Better Tools and Practices
Others argue that CSS itself is adequate, and that predictability issues stem primarily from poor organization and insufficient tooling. This camp emphasizes that Tailwind CSS, BEM methodologies, CSS Modules, and similar approaches have largely solved the state management problem for teams willing to adopt them consistently.
Advocates of this position note that many state management challenges reflect team communication failures rather than technical impossibilities. When teams establish clear conventions—consistent naming schemes, defined component patterns, and proper documentation—CSS states become quite manageable. They argue that CSS hasn't changed, but tooling and best practices have improved dramatically.
Furthermore, this perspective questions whether CSS-in-JS or more complex solutions actually deliver benefits proportional to their costs. Additional dependencies, build complexity, larger JavaScript bundles, and potential performance implications are real tradeoffs worth considering. Some developers maintain that well-structured CSS remains the most efficient approach for many projects.
The argument here suggests that the real need is not fundamental language changes but rather widespread adoption of existing best practices and more disciplined development culture.
The Broader Technical Landscape
Recent CSS developments like custom properties (CSS variables), the :has() selector, and improved container queries have begun addressing some of the constraints developers face. These additions suggest that CSS evolution continues, even if the pace sometimes frustrates developers working on complex applications. The question remains whether ongoing evolutionary improvements will suffice or whether more revolutionary changes are necessary.
The developer's years-long effort also reflects how individual passion projects sometimes yield insights that influence the broader industry. Open-source solutions, whether they directly solve the stated problem or not, often contribute valuable thinking to how communities approach technical challenges.
Practical Implications
For teams currently struggling with CSS state management, the debate presents practical considerations. Different projects may benefit from different solutions: a simple static site might thrive with conventional CSS, while a complex application with hundreds of interactive components might benefit from more structured approaches like CSS Modules or Tailwind CSS. Some teams may find value in CSS-in-JS for specific components while maintaining traditional CSS elsewhere.
The persistence of this challenge after decades of CSS history suggests that a one-size-fits-all solution remains elusive. Rather, the ecosystem continues producing tools and methodologies optimized for different contexts and team preferences.
Source: https://tenphi.me/blog/why-i-spent-years-trying-to-make-css-states-predictable/
Discussion (0)