Aller au contenu principal

📚 Variables CSS

Les variables CSS permettent de stocker des valeurs réutilisables dans votre code CSS. Elles facilitent la maintenance et la cohérence de votre visuel.

Syntaxe de base​

Déclarer une variable​

Les variables CSS commencent toujours par deux tirets (--) et sont déclarées dans un sélecteur.

:root {
    --couleur-principale: #0b3755;
    --espacement-base: 16px;
    --police-titre: 'Arial', sans-serif;
}
info

:root est le sélecteur le plus courant pour déclarer des variables globales. Il cible l'élément racine du document (généralement <html>).

Utiliser une variable​

Pour utiliser une variable, on utilise la fonction var().

.titre {
    color: var(--couleur-principale);
    font-family: var(--police-titre);
    margin-bottom: var(--espacement-base);
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 class="titre">Titre principal</h1>
  <p class="texte">Ceci est un paragraphe.</p>
  <button class="bouton">Bouton d'action (couleur principale)</button>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Portée des variables (Scope)​

Variables globales​

Les variables déclarées dans :root sont accessibles partout dans le document.

:root {
    --couleur-principale: #0b3755;
    --couleur-secondaire: #bfbfbf;
}

/* Accessible partout */
h1 { color: var(--couleur-principale); }
p { color: var(--couleur-secondaire); }

Variables locales​

Les variables déclarées dans un sélecteur spécifique ne sont accessibles que dans ce sélecteur et ses enfants.

.carte {
    --couleur-fond: #ecf0f1;
    --espacement-interne: 20px;
    
    background-color: var(--couleur-fond);
    padding: var(--espacement-interne);
}

.carte p {
    /* Accessible car p est enfant de .carte */
    margin: var(--espacement-interne);
}

.autre-element {
    /* NE FONCTIONNE PAS - variable non accessible ici si l'élément n'est pas un enfant de ".carte" */
    padding: var(--espacement-interne);
}

Valeurs par défaut (Fallback)​

La fonction var() accepte une deuxième valeur comme secours si la variable n'existe pas.

.element {
    /* Si --couleur-principale n'existe pas, utilise #3498db */
    color: var(--couleur-principale, #0b3755);
    
    /* Peut aussi être une autre variable */
    padding: var(--espacement-grand, var(--espacement-base, 16px));
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="exemple-1">
      <p>Ce div utilise la variable définie var(--couleur-definie, #e74c3c).</p>
  </div>
  
  <div class="exemple-2">
      <p>Ce div utilise la valeur par défaut car la variable n'existe pas: var(--couleur-non-definie, #e74c3c)</p>
  </div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Cas d'usage pratiques​

Palette de couleurs​

Les variables CSS sont parfaites pour définir une palette de couleurs cohérente.

:root {
    /* Couleurs principales */
    --couleur-principale: #0b3755;
    --couleur-secondaire: #ebf0f5;
    --couleur-accent: #e74c3c;
    
    /* Couleurs de texte */
    --texte-principal: #2c3e50;
    --texte-secondaire: #7f8c8d;
    --texte-clair: #ecf0f1;
    
    /* Couleurs de fond */
    --fond-page: #ffffff;
    --fond-section: #f8f9fa;
    --fond-carte: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="conteneur">
      <h1>Palette de couleurs cohérente</h1>
      <p class="texte-secondaire">Sous-titre avec texte secondaire</p>
      
      <div class="carte">
          <h3>Carte exemple</h3>
          <p>Contenu de la carte avec texte principal.</p>
          <button class="bouton-primaire">Action principale</button>
          <button class="bouton-secondaire">Action secondaire</button>
      </div>
      
      <div class="alerte">
          <strong>Attention!</strong> Message important.
      </div>
  </div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Système d'espacement​

Définir un système d'espacement cohérent facilite la mise en page.

:root {
    --espace-xs: 4px;
    --espace-sm: 8px;
    --espace-md: 16px;
    --espace-lg: 24px;
    --espace-xl: 32px;
    --espace-xxl: 48px;
}

.section {
    padding: var(--espace-lg);
    margin-bottom: var(--espace-xl);
}

.bouton {
    padding: var(--espace-sm) var(--espace-md);
    margin: var(--espace-xs);
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="section">
      <h2>Section avec espacement cohérent</h2>
      <p class="paragraphe">Paragraphe avec marges standardisées.</p>
      <p class="paragraphe">Un autre paragraphe.</p>
      
      <div class="boutons">
          <button class="bouton">Petit</button>
          <button class="bouton-large">Moyen</button>
          <button class="bouton-xlarge">Grand</button>
      </div>
  </div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Tailles de police​

Un système de tailles de police cohérent améliore la hiérarchie typographique.

:root {
    --taille-xs: 12px;
    --taille-sm: 14px;
    --taille-base: 16px;
    --taille-lg: 18px;
    --taille-xl: 24px;
    --taille-2xl: 32px;
    --taille-3xl: 48px;
}

h1 { font-size: var(--taille-3xl); }
h2 { font-size: var(--taille-2xl); }
h3 { font-size: var(--taille-xl); }
p { font-size: var(--taille-base); }
small { font-size: var(--taille-sm); }
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Titre principal (48px)</h1>
  <h2>Sous-titre (32px)</h2>
  <h3>Titre de section (24px)</h3>
  <p>Paragraphe normal (16px). Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p class="texte-petit">Texte petit (14px). Information secondaire.</p>
  <p class="texte-tres-petit">Texte très petit (12px). Note de bas de page.</p>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Bonnes pratiques​

Nommage cohérent​

Utilisez une convention de nommage claire et cohérente.

:root {
    /* Bon: noms descriptifs et cohérents */
    --couleur-principale: #0b3755;
    --couleur-secondaire: #ebf0f5;
    --espacement-petit: 8px;
    --espacement-moyen: 16px;
    
    /* À éviter: noms vagues ou incohérents */
    --bleu: #3498db;
    --color2: #2ecc71;
    --space1: 8px;
    --padding-md: 16px;
}
attention

Ne nommez jamais vos variables en fonction de noms de couleur! (ex.: --rouge). Utilisez plutôt le rôle de la couleur (--texte-principal, --couleur-principale). Comme cela, vous n'êtes pas attachés à une couleur et le nom de votre variable demeurre pertinent même si vous changez le thème de couleurs!

Organisation par catégories​

Groupez vos variables par catégories logiques.

:root {
    /* Couleurs */
    --couleur-primaire: #3498db;
    --couleur-secondaire: #2ecc71;
    --couleur-erreur: #e74c3c;
    
    /* Espacements */
    --espace-xs: 4px;
    --espace-sm: 8px;
    --espace-md: 16px;
    
    /* Typographie */
    --taille-texte-base: 16px;
    --taille-titre: 32px;
    --police-principale: 'Arial', sans-serif;
    
    /* Bordures */
    --rayon-bordure: 4px;
    --rayon-bordure-large: 8px;
}