More CSS

Make intentional decisions about structure, tokens, and tooling so CSS scales across components, themes, teams, and time.

No frameworks. Do not use TailwindCSS, UnoCSS, Bootstrap, or any other CSS framework. Write vanilla CSS only. If a utility layer is needed, build it — don't import it.

Core Principles

1. Tokens first — Define values once as custom properties; reference everywhere
2. Layer everything — Use @layer to make specificity predictable and override-safe
3. Name with intent — Naming conventions exist to communicate, not to decorate
4. Tooling serves you — Use a bundler to split files and handle imports; never let tooling substitute for clear CSS architecture
5. Composition over inheritance — Build components from tokens and utilities, not from each other
6. Relative units — Use relative values for everything except border-width and outline-width; px anywhere else overrides user preferences

Architecture

Layer Order