Ratgeber
CSS-Variablen für eine kleine Website sinnvoll organisieren
Eine einfache, praxisnahe Struktur für CSS-Variablen auf kleinen Websites.
Auch kleine Websites profitieren von einer klaren Variablenstruktur ohne Overengineering.
Create one root file for tokens
Store core variables in one place, usually in a global stylesheet.
This becomes the source of truth for repeated design values.
Group tokens by UI role
Use small groups like text, background, border, and action.
Role groups are easier to scan than long unstructured lists.
Use a consistent naming pattern
Pick one convention and keep it everywhere.
For example, --site-text-primary and --site-bg-surface.
- Prefix by project or theme.
- Add role first, state second.
- Avoid abbreviations teammates may misread.
Separate core and optional tokens
Keep the main set short, then add optional tokens only when needed.
This prevents token bloat on small projects.
Review variables during each UI update
When adding new components, check if an existing token already fits.
Only create a new variable when a real repeated role appears.
Useful for
- New small business websites.
- Landing page bundles with shared components.
- Freelance projects with recurring style updates.
Keep structure small and clear
You do not need enterprise-scale tokens—just enough structure to keep changes predictable.