Apprends Propriétés Personnalisées CSS

Que Sont les Propriétés Personnalisées CSS ?

Les propriétés personnalisées CSS (souvent appelées variables CSS) te permettent de définir des valeurs réutilisables qui peuvent être référencées dans toute ta feuille de style. Elles sont déclarées avec un préfixe double-tiret -- et lues avec la fonction var().

Pourquoi utiliser les propriétés personnalisées ?

Source unique de vérité — Change une couleur à un seul endroit et elle se met à jour partout où elle est utilisée.
Thématisation — Change des schémas de couleurs entiers en modifiant quelques variables.
Lisibilité — var(--primary-color) est plus significatif que #3498db.
Mises à jour dynamiques — Contrairement aux variables de préprocesseurs (Sass/Less), les propriétés personnalisées CSS sont actives dans le navigateur et peuvent être mises à jour avec JavaScript.

Déclarer des variables

Les variables sont déclarées sur un sélecteur. L'endroit le plus courant est :root (équivalent à <html>) pour qu'elles soient disponibles globalement :

css

:root {
  --primary-color: #3498db;
  --spacing-md: 16px;
  --font-main: "Inter", sans-serif;
}

Utiliser des variables

Référence une variable avec var() :

css

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-md);
  font-family: var(--font-main);
}

Propriétés Personnalisées en Pratique

html

<style>
  :root {
    --primary: #3498db;
    --secondary: #2ecc71;
    --text-color: #333;
    --bg-color: #ffffff;
    --radius: 8px;
    --spacing: 16px;
  }

  body {
    color: var(--text-color);
    background-color: var(--bg-color);
    font-family: sans-serif;
    padding: var(--spacing);
  }

  .card {
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
  }

  .card h3 {
    color: var(--primary);
  }

  .btn {
    background-color: var(--secondary);
    color: white;
    border: none;
    padding: 8px var(--spacing);
    border-radius: var(--radius);
    cursor: pointer;
  }
</style>

<div class="card">
  <h3>CSS Variables</h3>
  <p>Change --primary to update all blue elements at once.</p>
  <button class="btn">Click Me</button>
</div>

Valeurs de Secours, Portée et JavaScript

Valeurs de secours

La fonction var() accepte un deuxième argument optionnel — une valeur de secours utilisée si la variable n'est pas définie :

css

color: var(--accent-color, #e74c3c);

Si --accent-color n'est définie dans aucun ancêtre, #e74c3c est utilisée à la place.

Portée et héritage

Les propriétés personnalisées suivent la cascade normale et héritent le long de l'arbre DOM. Tu peux redéfinir une variable pour un sous-arbre spécifique :

css

:root { --bg: white; }
.dark-section { --bg: #1a1a1a; }

.card {
  background: var(--bg);
  /* Blanc en général, sombre dans .dark-section */
}

Mise à jour avec JavaScript

Parce que les propriétés personnalisées sont actives, tu peux les mettre à jour à l'exécution :

javascript

// Change a global variable
document.documentElement.style.setProperty('--primary', '#e74c3c');

// Change a scoped variable
element.style.setProperty('--card-bg', '#f0f0f0');

Cela fait des variables CSS la fondation de la thématisation dynamique — tu peux créer un mode sombre complet sans changer aucun sélecteur CSS.

Propriétés Personnalisées CSS