Pendant une décennie, le SASS a été roi. Nous avons défini €brand-color: #ff0000;. Nous l’avons compilé. Mais les variables SASS ont un défaut fatal : Elles meurent au moment de la compilation. Une fois que le CSS atteint le navigateur, la variable disparaît. C’est juste un code hexadécimal statique. Vous ne pouvez pas le modifier avec JavaScript. Vous ne pouvez pas l’étendre à un nœud DOM spécifique.

Saisissez Propriétés personnalisées CSS (variables). --brand-color : #ff0000;. Ce ne sont pas seulement des « variables ». Ce sont des propriétés du DOM. Ils cascadent. Ils sont vivants. Chez Maison Code Paris, nous les utilisons comme couche fondamentale de chaque système de conception que nous construisons.

Pourquoi Maison Code en parle

Chez Maison Code Paris, nous agissons comme la conscience architecturale de nos clients. Nous héritons souvent de stacks “modernes” construites sans compréhension fondamentale de l’échelle.

Nous abordons ce sujet car il représente un point de pivot critique dans la maturité de l’ingénierie. Une mise en œuvre correcte différencie un MVP fragile d’une plateforme résiliente de niveau entreprise.

1. La stratégie de superposition sémantique

Les débutants mappent les variables directement aux couleurs. --bleu : #0000ff; Les experts mappent les variables à Intent.

Nous utilisons une architecture à 3 couches :

Couche 1 : Primitives (La Palette)

Ceci est votre boîte de peinture brute. Cela n’a aucun sens, juste des valeurs.

:racine {
  --palette-bleu-100 : #ebf8ff;
  --palette-bleu-500 : #4299e1 ;
  --palette-bleu-900 : #2a4365 ;
  --palette-neutre-900 : #1a202c ;
  --palette-blanc : #ffffff ;
}

Couche 2 : Sémantique (Le jeton)

Cela mappe la palette à un objectif spécifique.

:racine {
  --bg-primary : var(--palette-white);
  --bg-secondaire : var(--palette-blue-100);
  --text-body: var(--palette-neutral-900);
  --action-primary : var(--palette-blue-500);
  --action-primary-hover : var(--palette-blue-900);
}

Couche 3 : Composant (L’utilisation)

Récupération d’un composant.

.btn-primaire {
  couleur d'arrière-plan : var(--action-primary);
  couleur : var(--bg-primary);
}

Pourquoi ? Si la marque décide que « l’action principale est désormais violette », vous modifiez une ligne dans la couche 2. Vous ne grep/sedez pas la totalité de la base de code.

2. Thème dynamique (mode sombre)

Étant donné que les variables CSS sont résolues au moment de l’exécution, la mise en œuvre du mode sombre est triviale. Vous redéfinissez simplement la couche 2 à l’intérieur d’un attribut de données.

[data-theme="dark"] {
  --bg-primary : var(--palette-neutral-900);
  --bg-secondaire : var(--palette-noir);
  --text-body: var(--palette-white);
}

Lorsque vous activez l’attribut sur <body>, l’ensemble du site est repeint instantanément (à 60 ips) car le navigateur échange simplement les pointeurs. Aucun rechargement de feuille de style requis.

3. Cadrage et isolement

Les variables obéissent à la Cascade. Cela permet un style contextuel puissant. Imaginez une « section sombre » au milieu d’une page claire.

.section-inversée {
  --text-body: var(--palette-white);
  --bg-primary : var(--palette-neutral-900);
}

Tout composant (Carte, Bouton, Texte) placé à l’intérieur de .section-inverted adoptera intrinsèquement les valeurs “Sombre”, même si le reste de la page est Clair. Le code du composant ne change pas. Il consomme simplement la variable de son parent le plus proche.

4. Interaction JavaScript : suivi de la souris

Vous pouvez lire/écrire des variables depuis JS. Cela permet des effets d’interface utilisateur hautes performances sans re-rendu React.

L’effet Spotlight « Suivre le curseur » :

document.addEventListener('mousemove', (e) => {
  const x = e.clientX;
  const y = e.clientY;
  document.body.style.setProperty('--mouse-x', `${x}px`);
  document.body.style.setProperty('--mouse-y', `${y}px`);
});

.spotlight {
  arrière-plan : dégradé radial (
    cercle à var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0,2),
    transparent 150px
  );
}

Cela fonctionne entièrement sur le thread CSS Compositor (principalement).

5. Intégration avec Tailwind CSS

Nous adorons Tailwind. Mais le codage en dur des valeurs hexadécimales dans « tailwind.config.js » est un anti-modèle. Liez Tailwind à votre couche sémantique.

// tailwind.config.js
module.exports = {
  thème : {
    couleurs : {
      // Utilisez la variable CSS, pas l'hexadécimal
      primaire : 'var(--action-primary)',
      arrière-plan : 'var(--bg-primary)',
      texte : 'var(--text-body)',
    }
  }
}

Maintenant, bg-primary génère .bg-primary { background-color: var(--action-primary) }. Vous bénéficiez du workflow utilitaire, mais vous conservez la flexibilité d’exécution.

6. Pièges en matière de performances

Scope Root Changes : la modification d’une variable sur :root déclenche un recalcul de style pour l’ensemble de l’arborescence DOM. C’est rapide, mais le faire sur un événement scroll est risqué. Préférez les modifications de portée à des conteneurs spécifiques.
calc() Complexité : width: calc(var(--a) * var(--b) + 10px) force le navigateur à faire des calculs à chaque image si les variables changent. A utiliser avec parcimonie.

7. Les performances de `calc()` par rapport au précalculé

Browser Math est rapide, mais pas gratuit. width: calc(var(--a) * var(--b)) s’exécute à chaque recalcul de mise en page. Si vous disposez de 10 000 nœuds qui effectuent cette opération, 60 ips chute à 30 ips. Optimisation : si la valeur est statique pour un composant, précalculez-la si possible en JS ou SASS. Utilisez des variables CSS pour les valeurs qui changent au moment de l’exécution (thème, dimensions, configuration utilisateur). Ne les utilisez pas uniquement pour éviter de taper des chiffres.

8. Utilisation de variables pour les états d’animation

Au lieu d’animer « transformer », animez une variable.

.carte {
  transformer: traduireY(var(--y, 0)) scale(var(--s, 1));
  transition : --y 0,2s, --s 0,2s ;
}
.card: survolez {
  --y : -10px ;
  --s : 1,05 ;
}

C’est plus propre que de redéfinir toute la chaîne transform. Il permet également des animations indépendantes (par exemple, JS mettant à jour --y tandis que CSS met à jour --s). Cela réduit la surcharge « CSS String Parsing » pour le navigateur.

9. Stratégies de repli

Pour les bibliothèques critiques, fournissez toujours une solution de secours. couleur : var(--text-body, noir); Si l’utilisateur charge votre composant mais oublie d’inclure le CSS Design System, il s’affichera toujours en noir et non invisible.

9. Requêtes de conteneur : variables contextuelles

Les requêtes multimédias (« @media (min-width : 768px) ») interrogent l’écran. Les requêtes de conteneur (« @container (min-width : 300px) ») interrogent le Parent. Cela change notre façon de penser les variables. Une carte peut dire : “Si mon conteneur est petit, --padding : 1rem. Si mon conteneur est grand, --padding : 2rem.” Cela rend les composants véritablement portables. Vous pouvez déposer la « Fiche produit » dans une barre latérale (petite) ou une grille principale (grande), et elle adapte sa propre logique interne sans remplacements externes.

10. Modèle d’objet CSS typé (Houdini)

Et si vous pouviez vérifier la saisie de vos variables CSS ? CSS.registerProperty({ nom : '--brand-color', syntaxe : '<color>', initialValue : 'black', hérite : true }) Ici Houdini. Il indique au navigateur : “—brand-color EST UNE COULEUR”. Si vous essayez de le définir sur “10px”, le navigateur l’ignore. Plus important encore, le navigateur peut désormais l’animer correctement car il sait que c’est une couleur (interpolant les valeurs RVB), pas seulement une chaîne.

12. Houdini : la plongée profonde

Houdini n’est pas seulement une question de types. Il s’agit de Performances. Lorsque vous animez une variable standard, le navigateur effectue une manipulation de chaîne sur chaque image. "10px" -> "11px" -> "12px". Avec CSS.registerProperty, il effectue une interpolation flottante rapide. 10.0 -> 11.0 -> 12.0. Cela déplace le travail du fil principal vers le fil de composition. L’animation reste fluide même si React bloque le thread principal avec une lourde tâche d’hydratation.

13. La règle @property (future proofing)

Nous avons mentionné Houdini. Il est désormais stable dans Chrome.

@property --gradient-angle {
  syntaxe : '<angle>' ;
  valeur initiale : 0deg ;
  hérite : faux ;
}

Vous pouvez désormais animer des dégradés ! rotation de l'image clé { vers { --gradient-angle : 360deg ; } } arrière-plan : dégradé conique (depuis var(--gradient-angle), rouge, bleu); C’était impossible auparavant. Vous deviez utiliser JS/Canvas. Maintenant, c’est du CSS natif. Cela débloque des animations complexes à 60 ips sur le compositeur.

14. Pourquoi Maison Code ?

Chez Maison Code, nous livrons des Design Systems, pas seulement des sites Web. Nous définissons vos tokens de marque en JSON (Figma). Nous les exportons automatiquement vers des variables CSS. Nous veillons à ce que votre mode sombre ne soit pas une réflexion secondaire, mais un citoyen de première classe. Nous construisons des architectures qui vous permettent de renommer l’ensemble de votre site en 5 minutes en modifiant quelques codes hexadécimaux. Nous accordons autant d’importance à la maintenabilité qu’à l’esthétique.

14. Liste de contrôle des variables CSS

Avant d’expédier votre Design System :

15. Conclusion

Les variables CSS sont l’outil le plus important pour faire évoluer l’architecture Front-End. Ils comblent le fossé entre le « Design » (Figma Tokens) et le « Code » (CSS). Si vous ne les utilisez pas, vous ne construisez pas de système. Vous ne faites que peindre des pages. Arrêtez de coder en dur les valeurs hexadécimales. Commencez à penser en jetons.

**[Engagez nos Architectes](/contact)**.