Status: ❌ Replaced

Replaced with css since 3 years later CSS variables are pretty much available everywhere. Also React Static was replaced with Astro which provides a great CSS modules like experience out of the box.

Principles

• atomic approach
• abstraction and composition
• max separation of concerns, no abstract classes leaking to markup (non negotiable)
• accept "leaky abstractions" in presentation layer (but caution)

Details

• minimal global css
• abstraction
  • utility and abstract mixins (Shared/styles)
  • abstract, presentation only, components (Shared/<component>/*.mixin.scss)
• composition:
  • [atomic hierarchy] (elements, blocks, groups, templates, layouts, behaviours)
• components first
  • minimal global css (custom properties and base)
  • component is the entry point for everything else
• tools:
  • sass variables and mixins to manage design tokens
  • post css to opt-in for (better than pre-css because it gets out of the way)

Why

• the future is web components
• the present is pre + css + post
• css custom properties - or "variables" - now widely supported (run-time!)
• css will one day have "mixins" - @apply: a form of mixins, though not supporting arguments
• ... and hopefully "mixins" with arguments too

Trade-offs

• bigger CSS files