CSS Custom Properties

CSS Variables

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
🔧 JavaScript API

Pourquoi les CSS Variables ?

❌ CSS Traditionnel

/* 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

/* 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

🚀 + JavaScript

/* Changement dynamique */
document.documentElement
  .style.setProperty(
    '--primary',
    '#10b981'
  );
  • • Changement instantané
  • • Personnalisation utilisateur
  • • Animations dynamiques
  • • A/B testing

Syntaxe et Utilisation

📝 Syntaxe de Base

Définition des variables :

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

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

Utilisation avec var() :

/* 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 :

CSS Variables!

🎯 Scope et Cascade

/* 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

Exemple pratique :

Container avec --local-size: 18px

Ce texte utilise var(--local-size) = 18px

Enfant avec --local-size: 22px

🎨 Theming Dynamique

🌓 Thème Clair/Sombre

/* 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);
}

Testez le changement de thème avec le bouton en haut à droite !

Composant Thématisé

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

🎨 Thèmes de Couleur

Choisissez un thème de couleur :

Boutons
Cards
Titre de Card

Contenu qui s'adapte au thème automatiquement.

Palette

⚡ JavaScript & CSS Variables

🔧 API JavaScript

/* 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');

🎮 Contrôles en Temps Réel :

Hover Me!

🚀 Cas d'Usage Avancés

🎨 Personnalisation Utilisateur

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

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

📊 Visualisations Dynamiques

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

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

🔄 A/B Testing

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

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

🎯 Exercices Pratiques

Exercice 1 : Design System

🎨 Créez un design system complet avec CSS Variables

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 :
: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 :
: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).

Maîtrisez les CSS Variables ! 🎨

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

🎯 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

🎨 Design Tokens 🌙 Theming Guide 🏗️ Architecture CSS