Les propriétés personnalisées CSS, souvent désignées sous le nom de variables CSS, représentent l'une des fonctionnalités les plus puissantes du CSS moderne pour construire des feuilles de style maintenables et personnalisables. Contrairement aux variables Sass/LESS qui sont compilées et disparaissent, les propriétés personnalisées CSS sont **actives directement dans le navigateur**, peuvent être limitées à n'importe quel élément, réagissent aux media queries et peuvent être modifiées dynamiquement avec JavaScript, offrant une flexibilité inégalée.

Syntaxe de Base

Définir et Utiliser les Propriétés Personnalisées
/* Define on :root for global scope */
:root {
  --color-primary: #6366f1;
  --color-bg: #0f172a;
  --color-text: #e2e8f0;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --font-sans: 'Inter', system-ui, sans-serif;
}

/* Use with var() */
.card {
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-sans);
}

/* Fallback value */
.card {
  color: var(--color-text, #ffffff);
}

Portée et Héritage

Les propriétés personnalisées respectent la cascade CSS et sont héritées par les éléments enfants. Cette caractéristique les rend idéales pour la thématisation au niveau des composants, permettant une gestion granulaire des styles.

Variables avec Portée Spécifique
/* Global defaults */
:root {
  --btn-bg: #6366f1;
  --btn-text: #ffffff;
  --btn-radius: 8px;
}

/* Override for a specific section */
.danger-zone {
  --btn-bg: #ef4444;
  --btn-text: #ffffff;
}

/* The button component uses the same variable names */
.btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: var(--btn-radius);
}

/* Les boutons à l'intérieur de .danger-zone deviennent automatiquement rouges */

Mode Sombre avec les Propriétés Personnalisées

Thème Clair et Sombre
/* Light theme (default) */
:root {
  --bg: #ffffff;
  --bg-secondary: #f8fafc;
  --text: #1e293b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --accent: #6366f1;
}

/* Dark theme */
[data-theme="dark"] {
  --bg: #0f172a;
  --bg-secondary: #1e293b;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --border: rgba(255, 255, 255, 0.1);
  --accent: #818cf8;
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f172a;
    --bg-secondary: #1e293b;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --border: rgba(255, 255, 255, 0.1);
    --accent: #818cf8;
  }
}

Intégration JavaScript

Lire et Écrire des Variables CSS en JS
// Read a CSS variable
const accent = getComputedStyle(document.documentElement)
  .getPropertyValue('--accent').trim();

// Set a CSS variable
document.documentElement.style.setProperty('--accent', '#10b981');

// Theme toggle
function toggleTheme() {
  const current = document.documentElement.dataset.theme;
  document.documentElement.dataset.theme = current === 'dark' ? 'light' : 'dark';
  localStorage.setItem('theme', document.documentElement.dataset.theme);
}

Système de Tokens de Design

Échelle d'Espacement et de Typographie
:root {
  /* Spacing scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */

  /* Font sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Responsive font sizes */
  --text-hero: clamp(2rem, 5vw, 3.5rem);
}

Bonnes Pratiques

  • **Utilisez des noms sémantiques** : préférez `--color-primary` à `--blue-500`. Cela vous permet de modifier la couleur réelle sans avoir à renommer la variable partout dans votre code, améliorant la flexibilité.
  • **Définissez tous vos tokens de design dans `:root`** pour une cohérence globale de votre charte graphique.
  • **Limitez la portée des variables spécifiques à un composant** à son propre sélecteur, favorisant l'encapsulation et la modularité.
  • **Fournissez toujours des valeurs de secours (fallback)** pour les propriétés critiques : `var(--color, #000)`, afin d'assurer une robustesse du style même si la variable n'est pas définie.
  • **Employez les propriétés personnalisées pour tout élément susceptible d'être modifié ou thématisé** : couleurs, espacements, polices, ombres, rayons de bordure, durées d'animation, etc. Elles sont parfaites pour créer une base de design flexible.

Découvrez Nos Outils CSS Gratuits

Optimisez et embellissez votre code CSS instantanément grâce à nos outils performants.