Guide
Comment utiliser des variables CSS pour les couleurs répétées
Remplacez les couleurs répétées par des variables CSS pour des mises à jour plus simples.
Quand la même valeur HEX revient partout, les variables CSS évitent les modifications dispersées.
Find repeated values first
Scan your CSS for colors that show up again and again.
Repeated values are the fastest wins for variable conversion.
Name variables by role, not shade
Use names like --brand-primary or --text-muted.
Role-based names stay useful even when the actual color changes later.
Define variables in :root
Store global colors in one :root block so every page can reuse them.
This keeps color updates centralized and predictable.
- Keep a consistent prefix.
- Group text, background, and action colors.
- Avoid duplicate variable names with slightly different values.
Replace hardcoded values in key components
Start with buttons, links, headings, and common surfaces.
After replacements, test hover and active states to catch missed values.
Document your starter token set
Add a short comment or style guide note for each variable role.
Clear notes help future edits stay consistent across files.
Best used for
- Small websites with repeated button and text colors.
- Landing pages with frequent visual updates.
- Teams that want cleaner handoff between design and code.
Start with repeats, then expand
Move your most repeated colors first, then gradually map the rest of your UI into reusable variables.