Maison interface Web tutoriel CSS Styles rationalisés : variables CSS pour un code maintenable

Styles rationalisés : variables CSS pour un code maintenable

Aug 22, 2024 am 08:32 AM

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>
  )
}
Copier après la connexion

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;
}
Copier après la connexion

Il est noir par défaut et ressemble à ceci

Streamlining Styles: CSS Variables for Maintainable Code

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;
}
Copier après la connexion

Cette personnalisation fonctionne comme prévu.

Streamlining Styles: CSS Variables for Maintainable Code

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);
}
Copier après la connexion

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;
}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Créez un formulaire de contact JavaScript avec le cadre Smart Forms Créez un formulaire de contact JavaScript avec le cadre Smart Forms Mar 07, 2025 am 11:33 AM

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Ajout d'ombres de boîte aux blocs et éléments WordPress Ajout d'ombres de boîte aux blocs et éléments WordPress Mar 09, 2025 pm 12:53 PM

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créer un éditeur de texte en ligne avec l'attribut satisfaistable Créer un éditeur de texte en ligne avec l'attribut satisfaistable Mar 02, 2025 am 09:03 AM

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques Mar 08, 2025 am 09:45 AM

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques

Travailler avec GraphQL Caching Travailler avec GraphQL Caching Mar 19, 2025 am 09:36 AM

Travailler avec GraphQL Caching

Faire votre première transition Svelte personnalisée Faire votre première transition Svelte personnalisée Mar 15, 2025 am 11:08 AM

Faire votre première transition Svelte personnalisée

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres) Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres) Mar 04, 2025 am 10:22 AM

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Téléchargement de fichiers avec Multer dans Node.js et Express Téléchargement de fichiers avec Multer dans Node.js et Express Mar 02, 2025 am 09:15 AM

Téléchargement de fichiers avec Multer dans Node.js et Express

See all articles