CSS architecture doesn't collapse overnight. It degrades through accumulated inconsistencies: one developer writes margins on child components, another specifies them from parents. Component boundaries become interpretive. Naming conventions drift across files.
This is architectural drift, and it's getting worse as teams adopt AI coding assistants.
SpiraCSS, a production-deployed framework now available open source, addresses this through what its developer calls 'invariants': mechanically verifiable rules that eliminate interpretive ambiguity. Instead of 'decompose components appropriately' (requires judgment), the framework enforces 'a Block's direct children can only be Blocks or Elements' (true or false, automatable).
The distinction matters. Convention-based designs have three structural weaknesses: memorization burden, subjective decisions, and verification difficulty. When all three exist, drift is inevitable. Reviews maintain quality only while the reviewer's judgment stays consistent.
SpiraCSS's invariants must meet three criteria: binary evaluation (no gray zones), syntax-verifiable (determinable through code analysis), and locally verifiable (checkable within a single file). This enables lint tools to serve as gatekeepers rather than relying on human judgment.
The approach parallels established practices in cloud-native operations. Configuration drift is a documented security and cost concern in enterprise environments. Infrastructure-as-code and GitOps practices prevent drift through version control and automated enforcement. SpiraCSS applies the same principle to design systems.
The framework defines specific invariants: margin-top can only be specified from parent selectors. Blocks use two-word kebab-case naming. Elements use single words. Variants use data-variant attributes. States use data-state. Each rule is automatable.
What this means in practice: as development velocity accelerates and AI-generated code becomes standard, maintaining architectural coherence requires shifting from 'rules to memorize' to 'feedback systems.' The longer the guidelines, the harder accurate application becomes, whether the author is human or AI.
Notably, the framework acknowledges that its rules represent fixed preferences rather than universal correctness. 'Write margin from the parent' isn't the only valid approach. But standardizing preferences so all authors converge on identical output serves team productivity, especially when those authors include both humans and AI agents.
The project's full specifications, tooling, and source code are available on GitHub. The developer promises a follow-up on feedback loop design: how lint tools should communicate not just violations but correction paths.
History suggests prescriptive architecture frameworks can become outdated faster than development velocity allows. SpiraCSS's emphasis on mechanically verifiable rules rather than unchanging doctrine suggests awareness of this tension. We'll see whether the approach scales beyond its creator's production environment.