Variables CSS

Découvrez la puissance des CSS custom properties pour créer des designs dynamiques, des thèmes adaptatifs et une architecture CSS maintenable.

Theming dynamique
Performance native
API JavaScript

Pourquoi les variables CSS

Une couleur écrite trois fois se corrige trois fois. Une variable se corrige une seule.

CSS traditionnel

css

/* Duplication partout */
.btn-primary {
  background: #3b82f6;
}
.link {
  color: #3b82f6;
}
.border-accent {
  border-color: #3b82f6;
}

Duplication de valeurs
Maintenance difficile
Pas de theming dynamique
Recherche/remplacement global

CSS variables

css

/* Source unique */
:root {
  --primary: #3b82f6;
}

.btn-primary {
  background: var(--primary);
}
.link {
  color: var(--primary);
}

Source unique de vérité
Maintenance centralisée
Theming dynamique
API JavaScript native

Avec JavaScript

js

/* Changement dynamique */
document.documentElement
.style.setProperty(
'--primary',
'#10b981'
);

Changement instantané
Personnalisation utilisateur
Animations dynamiques
A/B testing

Syntaxe et utilisation

Deux règles suffisent : on déclare avec deux tirets, on lit avec var().

Syntaxe de base

Définition des variables

css

/* Variables globales */
:root {
  --primary-color: #3b82f6;
  --spacing-lg: 2rem;
  --border-radius: 8px;
}

/* Variables locales */
.card {
  --card-padding: 1.5rem;
}

Utilisation avec var()

css

/* Application des variables */
.button {
  background: var(--primary-color);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
}

/* Avec fallback */
.text {
  color: var(--text-color, #333);
}

Démo interactive

--demo-color

--demo-size

--demo-radius

Aperçu en temps réel

CSS Variables!

CSS actuel

Les trois variables agissent sur la même boîte : c’est la source unique qui rend le changement instantané.

Scope et cascade

css

/* Hiérarchie des variables */
:root {
  --size: 16px;
}

.container {
  --size: 20px; /* Override */
}

.container .child {
  font-size: var(--size); /* = 20px */
}

Points clés

Les variables héritent de leur parent
:root = variables globales
Variables locales surchargent les globales
Cascade CSS normale s’applique

L’enfant redéclare --local-size : c’est sa valeur qui gagne, pas celle du conteneur.

Theming dynamique

Un jeu de variables par thème, et toute la page suit. C’est le cas d’usage qui a fait adopter les custom properties.

Thème clair et thème sombre

css

/* Variables de thème */
:root {
  --bg-color: #ffffff;
  --text-color: #1f2937;
}

[data-theme="dark"] {
  --bg-color: #111827;
  --text-color: #f9fafb;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

thème

Composant thématisé

Ce composant s’adapte automatiquement au thème grâce aux variables CSS.

Cette bascule est celle de la DÉMONSTRATION : elle ne touche pas au thème du site, qui a son propre bouton dans la barre du haut.

Thèmes de couleur

Cinq thèmes, trois variables chacun : le bouton pose les trois d’un coup, et tout ce qui en dépend suit.

thème de couleur

Bouton principal

Bouton secondaire

Titre de card — contenu qui s’adapte au thème automatiquement.

Palette

Un seul bouton pose trois variables. C’est la leçon : une source unique en entraîne plusieurs.

JavaScript et variables CSS

Les custom properties sont lisibles et modifiables depuis JavaScript, sans recompiler quoi que ce soit.

API JavaScript

js

/* Lire une variable */
const color = getComputedStyle(
document.documentElement
).getPropertyValue('--primary-color');

/* Modifier une variable */
document.documentElement
.style.setProperty(
'--primary-color',
'#10b981'
);

/* Supprimer une variable */
document.documentElement
.style.removeProperty('--primary-color');

Explorer la durée d’animation

--animation-duration

Hover Me!

--animation-duration: ;

La variable pilote la transition. Survolez la boîte : la durée change sans qu’une seule règle CSS soit réécrite.

Cas d’usage avancés

Personnalisation utilisateur

Permettre aux utilisateurs de personnaliser l’interface selon leurs préférences.
js

/* Sauvegarde des préférences */ localStorage.setItem( 'theme', 'dark' );
Visualisations dynamiques

Créer des graphiques et animations basés sur des données.
js

/* Animation de données */ element.style.setProperty( '--progress', data + '%' );

A/B testing

Tester différentes variations de design en temps réel.

js

/* Test de variantes */
if (variant === 'A') {
  setPrimaryColor('blue');
}

Exercices pratiques

Trois exercices progressifs, du design system à l’application complète.

Exercice 1 : design system

Créez un design system complet avec les variables CSS.
Objectifs
- Définir une palette de couleurs cohérente
- Créer un système d’espacement harmonieux
- Implémenter un thème sombre/clair
- Ajouter 3 variantes de couleur (bleu, vert, violet)
- Créer des composants réutilisables
Structure recommandée
css

:root { /* Couleurs de base */ --blue-500: #3b82f6; --green-500: #10b981; /* Tokens sémantiques */ --primary: var(--blue-500); --secondary: var(--green-500); /* Espacement */ --space-1: 0.25rem; --space-2: 0.5rem; }
Conseil

Commencez par définir vos tokens primitifs (couleurs brutes, tailles), puis créez des tokens sémantiques qui leur font référence (primary, secondary, etc.).
Exercice 2 : animations dynamiques

Créez un système d’animations contrôlé par JavaScript.
Fonctionnalités à implémenter
- Slider pour contrôler la vitesse d’animation
- Boutons pour changer les transitions (ease, bounce, etc.)
- Contrôle de la rotation et de l’échelle au hover
- Sauvegarde des préférences en localStorage
- Animations différentes selon le thème
Code de démarrage
css

:root { --anim-duration: 0.3s; --anim-easing: ease; --hover-scale: 1.1; } .animated { transition: all var(--anim-duration) var(--anim-easing); } .animated:hover { transform: scale(var(--hover-scale)); }
Exercice 3 : application e-commerce

Construisez une page produit thématisable.
Éléments requis
- Header avec navigation thématisée
- Grille de produits responsive
- Cards produit avec hover effects
- Boutons d’action (Ajouter au panier, etc.)
- Formulaire de contact stylé
- Footer adaptatif
- Sélecteur de thème utilisateur
- Mode sombre automatique selon l’heure
Challenge bonus

Implémentez un système de thèmes saisonniers qui change automatiquement selon la date (printemps = vert, été = jaune, automne = orange, hiver = bleu).

Les variables CSS sont acquises

Vous avez maintenant toutes les clés pour créer des designs dynamiques et maintenables. Les variables CSS révolutionnent la façon dont nous écrivons et organisons notre CSS.

Passer au CSS avancé Revoir les bases

🎯 Maintenance

Source unique de vérité pour tous vos styles
⚡ Performance

Changements CSS natifs, pas de recompilation
🔄 Dynamisme

API JavaScript pour contrôle temps réel

Les autres pages CSS

Les bases du CSS

Syntaxe, sélecteurs, modèle de boîte
Ouvrir le cours
CSS avancé

Container queries, transforms 3D
Ouvrir le cours
Responsive

S’adapter à chaque écran
Ouvrir le cours
Animations

Mettre en mouvement
Ouvrir le cours

Variables CSS

Pourquoi les variables CSS

❌ CSS traditionnel

✅ CSS variables

🚀 Avec JavaScript

Syntaxe et utilisation

Syntaxe de base

Définition des variables

Utilisation avec var()

Démo interactive

Scope et cascade

Points clés

Theming dynamique

Thème clair et thème sombre

Thèmes de couleur

JavaScript et variables CSS

API JavaScript

Explorer la durée d’animation

Cas d’usage avancés

🎨 Personnalisation utilisateur

📊 Visualisations dynamiques

🔄 A/B testing

Exercices pratiques

Exercice 1 : design system

Objectifs

Structure recommandée

Conseil

Exercice 2 : animations dynamiques

Fonctionnalités à implémenter

Code de démarrage

Exercice 3 : application e-commerce

Éléments requis

Challenge bonus

Les variables CSS sont acquises

🎯 Maintenance

⚡ Performance

🔄 Dynamisme

Les autres pages CSS

Les bases du CSS

CSS avancé

Responsive

Animations

CSS traditionnel

CSS variables

Avec JavaScript

Personnalisation utilisateur

Visualisations dynamiques

A/B testing