Guide : Les variables CSS (Custom Properties) expliquées

Les variables CSS : un outil révolutionnaire

Les variables CSS (ou Custom Properties) vous permettent de stocker des valeurs réutilisables dans votre feuille de styles. Changez une variable, et toutes les propriétés qui l’utilisent se mettent à jour automatiquement.

Syntaxe de base

/* Déclarer des variables (dans :root = global) */
:root {
    --couleur-principale: #667eea;
    --couleur-secondaire: #764ba2;
    --couleur-texte: #333333;
    --couleur-fond: #f8f9fa;
    --police: 'Segoe UI', sans-serif;
    --rayon-bordure: 8px;
    --ombre: 0 4px 15px rgba(0, 0, 0, 0.1);
    --espacement: 20px;
    --largeur-max: 1200px;
}

/* Utiliser les variables avec var() */
body {
    font-family: var(--police);
    color: var(--couleur-texte);
    background: var(--couleur-fond);
}

.bouton {
    background: var(--couleur-principale);
    border-radius: var(--rayon-bordure);
    padding: var(--espacement);
    box-shadow: var(--ombre);
}

.conteneur {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 var(--espacement);
}

Valeur de secours (fallback)

/* Si la variable n'existe pas, utilise la valeur de secours */
.element {
    color: var(--couleur-titre, #000000);
    padding: var(--padding-custom, 16px);
}

Variables locales (scope)

/* Variables globales */
:root {
    --couleur-principale: #667eea;
}

/* Variables locales : n'existent que dans ce composant */
.carte-danger {
    --couleur-principale: #e53935;
    background: var(--couleur-principale);  /* Rouge */
    color: white;
}

.carte-succes {
    --couleur-principale: #43a047;
    background: var(--couleur-principale);  /* Vert */
    color: white;
}

/* Le reste du site garde #667eea */

Cas pratique : Système de thèmes

:root {
    --bg: #ffffff;
    --text: #1a1a1a;
    --card-bg: #f5f5f5;
    --accent: #667eea;
}

/* Thème sombre */
[data-theme="dark"] {
    --bg: #1a1a2e;
    --text: #e0e0e0;
    --card-bg: #16213e;
    --accent: #818cf8;
}

/* Thème vert */
[data-theme="nature"] {
    --bg: #f1f8e9;
    --text: #2e7d32;
    --card-bg: #e8f5e9;
    --accent: #43a047;
}

/* Un seul CSS pour tous les thèmes ! */
body { background: var(--bg); color: var(--text); }
.card { background: var(--card-bg); }
a { color: var(--accent); }

Cas pratique : Composant bouton flexible

.btn {
    --btn-bg: var(--couleur-principale);
    --btn-color: white;
    --btn-size: 16px;
    --btn-padding: 10px 24px;
    --btn-radius: 8px;
    
    background: var(--btn-bg);
    color: var(--btn-color);
    font-size: var(--btn-size);
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
}

.btn:hover { opacity: 0.85; }

/* Variantes : juste changer les variables */
.btn-outline {
    --btn-bg: transparent;
    --btn-color: var(--couleur-principale);
    border: 2px solid var(--couleur-principale);
}

.btn-large {
    --btn-size: 20px;
    --btn-padding: 16px 40px;
}

.btn-pill {
    --btn-radius: 50px;
}

.btn-danger {
    --btn-bg: #e53935;
}

Variables CSS + calc() = puissance

:root {
    --base-size: 16px;
    --ratio: 1.25;
}

/* Échelle typographique automatique */
h1 { font-size: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio)); }
h2 { font-size: calc(var(--base-size) * var(--ratio) * var(--ratio)); }
h3 { font-size: calc(var(--base-size) * var(--ratio)); }
p  { font-size: var(--base-size); }

/* Espacement proportionnel */
:root {
    --space-unit: 8px;
}
.mt-1 { margin-top: var(--space-unit); }           /* 8px */
.mt-2 { margin-top: calc(var(--space-unit) * 2); }  /* 16px */
.mt-3 { margin-top: calc(var(--space-unit) * 3); }  /* 24px */
.mt-4 { margin-top: calc(var(--space-unit) * 4); }  /* 32px */

Modifier les variables avec JavaScript

// Lire une variable CSS
const couleur = getComputedStyle(document.documentElement)
    .getPropertyValue('--couleur-principale');

// Modifier une variable CSS
document.documentElement.style.setProperty('--couleur-principale', '#e53935');

// Exemple : sélecteur de couleur
document.getElementById('couleur-picker').addEventListener('input', (e) => {
    document.documentElement.style.setProperty('--couleur-principale', e.target.value);
    // Tout le site change de couleur en temps réel !
});

Variables CSS vs Sass : comparaison

Exercice pratique