Skip to content

Meta

Styling: SASS + Post CSS

We are using Sass + PostCSS all the way, but can we have modules, and can we have them strongly typed for Typescript code?

This meta-record was published on


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

Go back to top of the page