Variables CSS (Custom Properties)

Les variables CSS rendent un design cohérent et facile à faire évoluer.

Déclarer des variables globales

:root {
  --color-primary: #0ea5e9;
  --color-surface: #f8fafc;
  --space-md: 1rem;
  --radius-md: 0.75rem;
}

Les utiliser

.button {
  background: var(--color-primary);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

Scope local

Tu peux redéfinir une variable dans un composant :

.card-warning {
  --color-primary: #f59e0b;
}

Tous les descendants de .card-warning utiliseront cette nouvelle valeur.

Pourquoi c'est important

• centralise les décisions de design
• accélère les changements de thème
• réduit les répétitions et les erreurs

A retenir

Les custom properties sont une base d'architecture moderne. Même sur un petit projet, elles améliorent lisibilité et maintenance.

Mini pratique

Crée un mini design system avec 6 variables :

• 2 couleurs
• 2 espacements
• 2 rayons de bordure

Applique-les à un bouton, une carte et un titre.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.