Styles rationalisés : variables CSS pour un code maintenable

Voici quelques informations sur la façon dont les variables CSS peuvent simplifier la prise en charge des composants réutilisables et personnalisables. Quel que soit le framework que vous utilisez, cette approche reste indépendante du framework.

Exemple de composant

Supposons que je doive ajouter le composant Barre de progression à mon kit d'interface utilisateur. En utilisant React comme exemple, voici une implémentation simple.

import "./ProgressBar.css";

export function ProgressBar({percentage} : {percentage: number} ){
  return ( 
    <div className="progress-bar">
      <div className="fill"
        style={{ width: percentage + "%"}}
      />
    </div>
  )
}

Et CSS pour ajouter des couleurs et des règles de base

.progress-bar{
  width: 200px;
  height: 20px;
  border: 1px solid black;
}

.progress-bar .fill{
  height: 100%;
  background: black;
}

Il est noir par défaut et ressemble à ceci

Le composant est censé être réutilisé dans différentes parties de mon application. Je m'attends à ce que chaque consommateur ait la possibilité de personnaliser la couleur de la barre et de sa bordure en fonction de ses besoins spécifiques et de sa palette de couleurs.

J'attends des consommateurs qu'ils fournissent leurs propres règles CSS pour remplacer les couleurs par défaut. Par exemple, un consommateur peut écrire le CSS suivant pour rendre la barre de progression verte dans la section de téléchargement.

#upload .progress-bar{
  border-color: green
}
#upload .progress-bar .fill {
  background-color: green;
}

Cette personnalisation fonctionne comme prévu.

Chaque consommateur peut adopter la même approche, et à première vue, cela semble être une solution solide.

Problème

Cependant, cette façon de personnalisation présente plusieurs inconvénients

❌ Futurs bugs : À long terme, le composant de la barre de progression sera mis à jour ou refactorisé. La personnalisation sera interrompue si les classes sont renommées ou si la hiérarchie des balises est modifiée.
? Charge cognitive du consommateur : Les développeurs utilisant mon composant doivent examiner sa structure HTML pour déterminer les règles CSS nécessaires pour remplacer les valeurs par défaut.
⚒️ Code de personnalisation encombrant : Modifier à la fois la couleur de la barre et sa bordure nécessite d'écrire deux règles distinctes.

Bien sûr, ce n'est pas grave pour des cas simples comme notre ProgressBar. Cependant, des composants plus complexes dans un grand kit d'interface utilisateur, en particulier lorsqu'ils sont utilisés par de nombreux développeurs, peuvent présenter des défis importants.

Variable CSS comme solution

Pour simplifier la personnalisation et atténuer ces problèmes, nous pouvons exploiter les variables CSS.

Dans mon exemple de composant, les modifications sont apportées uniquement dans le fichier CSS

.progress-bar{
  --progress-bar-color: black;
  width: 200px;
  height: 20px;
  border: 1px solid var(--progress-bar-color);
}

.progress-bar .fill{
  height: 100%;
  background: var(--progress-bar-color);
}

Notez que je déclare la variable --progress-bar-color pour définir la couleur. Les consommateurs peuvent désormais personnaliser le composant aussi facilement que

#upload .progress-bar{
  --progress-bar-color: green;
}

Avec cette nouvelle approche, revisitons la liste des problèmes de personnalisation

❌ Futurs bugs : En tant que développeur de la barre de progression, je peux modifier les noms des classes et la hiérarchie selon les besoins. Cependant, tant que j'applique correctement la variable CSS aux éléments mis à jour, les personnalisations de couleurs effectuées par les consommateurs restent intactes.
? Charge cognitive du consommateur : Les consommateurs n'ont plus besoin d'examiner le code de mon composant pour personnaliser les couleurs. La variable CSS agit comme une « interface » ou une « abstraction », leur permettant de définir simplement la couleur souhaitée sans entrer dans les détails de mise en œuvre.
⚒️ Code de personnalisation encombrant : Désormais, une seule règle CSS peut personnaliser à la fois les éléments de remplissage et de bordure.

Avantage supplémentaire

En termes de personnalisation des couleurs, s'appuyer sur la variable CSS rationalise l'application d'un jeu de couleurs général. Vous pouvez gérer tous les paramètres de couleur avec un simple fichier CSS qui définit les variables sur toute la page.

Désormais, toutes les couleurs de la page peuvent être contrôlées à partir d'un seul endroit. Pour mettre à jour les couleurs de la page entière, remplacez simplement les définitions de variables CSS par un nouvel ensemble.

Cette approche facilite également la mise en œuvre de fonctionnalités telles que les thèmes clairs/sombres ou les préférences de couleurs définies par l'utilisateur.

Résultat

? Meilleure maintenabilité : En adoptant la personnalisation via des variables CSS, la base de code devient plus maintenable, rendant les futures mises à jour plus simples et moins longues.

? Code réduit aux bugs : La séparation claire entre les composants internes du composant et son interface de personnalisation minimise le risque de bugs, car les modifications apportées à l'implémentation interne n'affectent pas la façon dont le composant est personnalisé.

? Le code devient plus facile à comprendre : L'utilisation de variables CSS rend la solution plus intuitive et plus facile à comprendre. Les développeurs peuvent rapidement comprendre comment modifier les styles sans se plonger dans un code complexe ou opaque.

♾️ Indépendant du framework : Vous pouvez appliquer cette approche partout car elle repose uniquement sur les fonctionnalités du navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!