Styling: SASS + Post CSS
Last updated
Principles
- atomic aproach
- 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
)
- utility and abstract mixins (
- 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