Guide
Comment organiser les variables CSS pour un petit site web
Mettez en place une structure CSS simple pour petit site, sans sur-ingénierie.
Même un petit site gagne en clarté avec quelques groupes de variables bien définis.
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.