Custom Properties

Definition

Variables CSS déclarées avec -- et utilisées via var(). Elles cascadent, sont héritées et peuvent être modifiées dynamiquement en JS, contrairement aux variables Sass.

Analogie

Comme des réglages centralisés dans une télécommande : on change une valeur et tous les appareils s'adaptent.

Exemple de code

:root {
  --color-primary: #3b82f6;
  --spacing: 1rem;
}
.btn {
  background: var(--color-primary);
  padding: var(--spacing);
}
.dark { --color-primary: #60a5fa; }

Cas d'usage

Créer un système de design tokens avec thèmes clair/sombre modifiables en runtime.

Anti-pattern

Termes lies