Notes from the Pass: State Hiding Inside CSS Tokens
Explore architectural issues in quell-base.css when application state sneaks into baseline token layers and mixes with design values.
Stock photo for illustration only, not from the actual event
- The quell-base.css file uses a ghost_tokens layer to provide fully-resolved fallback token values before paint.
- Injecting application state variables like --is-modal-open creates architectural confusion.
- Browsers cannot distinguish design values from application state tokens due to identical syntax.
- A robust CSS architecture must maintain strict boundaries to prevent token layers from storing app state.
An insightful article on Dev.to by Ortiz Franklin explores architectural flaws in CSS systems when application state concepts are hidden inside token layers where they do not belong, expanding on the premise that a system with no declared exclusions will eventually be asked to do everything.
A concrete example resides within quell-base.css, which declares a ghost_tokens layer. Its primary function is to supply fully-resolved fallback values for every token consumed by the baseline before paint, serving as a FOUC firewall to ensure downstream var() calls are never left empty even if theme sheets load late.
Stock photo for illustration only, not from the actual event
The file establishes a clear vocabulary including font, color, space, size, radius, border, shadow, and motion. Variables such as --color-accent fit neatly within this vocabulary, but because browsers cannot enforce these semantic distinctions architecturally, the system design must do so instead.
This scenario highlights a common architectural trap in large stylesheet systems where developers exploit powerful styling mechanisms to bypass state management boundaries. Blending runtime application state with static design tokens introduces hidden coupling and increases long-term maintenance friction.
Understanding this boundary helps engineering teams prevent cascading side effects and keeps design tokens focused purely on visual presentation rather than dynamic component states.
The complication arises when a variable like --is-modal-open enters this same layer. It stops being a mere fallback and becomes an assertion about application state before the app has officially established it, bypassing normal control flows across the stylesheet hierarchy.
"--color-accent : #0057cc ; /* a value */ --is-modal-open : 0 ; /* application state */ Entrer fullscreen mode Exit fullscreen mode At parse time, the browser cannot tell these apart."
Ortiz Franklin
During parse time, the browser views both declarations identically as custom properties. The ghost_tokens layer performs its intended job without breaking technically, but the architectural contract is violated because a baseline resolver has been repurposed into holding application state facts.
Ultimately, the boundary is not that CSS should never handle state, but rather that a baseline token layer must never become an application-state store simply because CSS assigns both types of information the exact same syntax.
Source: Dev.to
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment