Guía
Cómo organizar variables CSS para un sitio web pequeño
Define una estructura simple de variables CSS para sitios pequeños sin complicarte de más.
Incluso un sitio pequeño mejora con una estructura básica de variables y roles claros.
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.