FSCSS Component Architecture: A Modular, Composition-First Approach to CSS

FSCSS component architecture is built around a modular, composition-first model that compiles to plain CSS. It emphasizes reusable style units, design tokens, conditional logic, and selective imports—with almost no runtime JavaScript required for the final output. Components in FSCSS are treated as pure style definitions rather than framework-specific widgets, keeping stylesheets readable, highly reusable, and free of classic “mega-stylesheet” problems while still producing standard CSS that any browser understands. Core Building Blocks FSCSS provides a focused set of primitives for defining and composing styles: Primitive Purpose Best for Introduced / Key version str(name, "…") Named blocks of CSS declarations Simple reusable style snippets Core @fun(name){…} Key-value stores (design tokens) Spacing scales, color palettes, property groups Core @define name(params) Parameterized mixins Themed components, variants, full structures 1.1.15+ pattern(threshold: "desc", "…") Semantic / fuzzy matching Natural-language style injection 1.1.25+ @event name(param) Conditional value functions Themes, states, calculations Core @arr(name[…]) Arrays + iteration Generated classes, loops, scales Core @import Selective / wildcard module loading Modular architecture & ecosystem modules Core How Components Are Structured 1. Atomic / Token Layer ( @fun + variables) Design tokens sit at the foundation so every component draws from a single source of truth: @fun(tokens) { primary: #2563eb; radius-md: 8px; space-4: 1rem; shadow-sm: 0 1px 3px rgba(0,0,0,.1); } 2. Base Style Blocks ( str() or @fun full-block) Related declarations are grouped into reusable blocks that can be dropped into any selector: str(card-base, " padding: @fun.tokens.space-4.value; border-radius: @fun.tokens.radius-md.value; box-shadow: @fun.tokens.shadow-sm.value; background: white; ") 3. Parameterized Components ( @define ) True mixins accept arguments and can be composed freely: @define button(bg: #2563eb, fg: white,