Catégories
Astuces et Design

Paramètres globaux et de style de composant avec des variables CSS – Sara Soueidan – Développeur UI / UX Freelance-Front-End

Depuis que j'ai découvert les variables CSS il y a quelques années, ma fonction préférée absolue a été la possibilité d'étendre les variables aux composants. Mais pour être honnête, je n'ai pas utilisé cette fonctionnalité au fil des ans, jusqu'à ce que J'ai créé ma propre bibliothèque de modèles l'année dernière pour accélérer le prototypage et le travail client. C’est là que les variables CSS étendues ont vraiment brillé pour moi. Je veux donc partager mes deux façons préférées d'utiliser les variables CSS pour organiser et maintenir les styles dans mes projets aujourd'hui.

Au cours des derniers mois, j'ai commencé à aborder la façon dont j'organise et gère mon CSS différemment…

Paramètres globaux du projet

Aujourd'hui, au début de chaque projet, je crée un _settings.scss feuille de style. Cette feuille de style contient le paramètres globaux pour le projet. Ces paramètres sont généralement dérivés du guide de style de conception fourni par l'équipe de conception avec laquelle je travaillerais.

capture d'écran partielle d'un guide de style montrant les valeurs des échantillons de couleurs et des styles d'ombre de boîte
Un exemple de paramètres visuels définis dans un guide de style pour mon projet client actuel. Le guide de style contient des échantillons de couleurs, des couleurs de marque, des couleurs d'interaction et d'interface utilisateur, des styles de police, des échelles de type, des échelles d'espacement, des icônes, etc. J'ai utilisé le guide de style comme point de départ dans mon CSS, car j'ai créé et défini les styles de projet globaux en dérivant leurs valeurs de leurs équivalents visuels dans le guide de style.

Tout comme le guide de style contient des paramètres pour les styles visuels tels que les couleurs, les styles d'ombre de boîte, les styles de police, les échelles de texte, etc., le _settings la feuille de style contient des variables qui servent d'équivalent de code de ces paramètres et qui sont utilisées dans le CSS pour maintenir la cohérence visuelle à travers le projet.


:root {
    /* UI Colors */
    --primary-hue: 12;
    --color--primary: hsl(var(--primary-hue), 100%, 44%);
    --color--primary--hover: hsl(var(--primary-hue), 100%, 39%);
    --color--primary--active: hsl(var(--primary-hue), 84%, 30%);

    /* ... */

    --border-color: #ebebeb;

    /* Box Shadows */
    --shadow-01: 0px 2px 4px rgba(37, 37, 37, 0.1);
    --shadow-02: 0px 4px 8px rgba(37, 37, 37, 0.1);
    --shadow-03: 0px 8px 16px rgba(37, 37, 37, 0.1);
    --shadow-04: 0px 16px 24px rgba(37, 37, 37, 0.1);
    --shadow-05: 0px 24px 32px rgba(37, 37, 37, 0.1);

    /* ... */

}
Un exemple de paramètres de style global définis dans un _settings.scss feuille de style dans mon projet client actuel.

.card {
    /* ... */

    box-shadow: var(--shadow-01);
    border: 1px solid var(--border-color);

    transition: box-shadow .2s linear;

    &:hover, 
    &:focus {
        box-shadow: var(--shadow-03);
    }
}

Si à un moment quelconque du projet l'un de ces paramètres doit être modifié, je sais exactement où aller pour effectuer ce changement, et je sais qu'il se propagera de manière cohérente sur l'ensemble de mon système.


En plus de ces paramètres, j'ai trouvé le plus de valeur et de commodité dans l'utilisation de variables CSS pour définir des styles locaux à portée de composants…

Prototypage plus rapide avec des composants «squelettes»

Au fil des ans, et dans l'intérêt de gagner du temps et d'accélérer les idées de prototypage et le travail client, j'ai créé une bibliothèque d'interfaces utilisateur et de modèles de conception que je me retrouve à recréer sur la plupart de mes projets. La bibliothèque contient désormais une collection croissante de modèles d'interface utilisateur facilement réutilisables que je peux copier-coller de manière fiable dans mes projets lorsque j'en ai besoin. Chaque modèle est progressivement amélioré à l'aide de CSS et JavaScript modernes, et est multi-navigateur et multi-plateforme accessible à partir de zéro.

Depuis que j'ai créé la bibliothèque en tant que projet «interne», elle vit actuellement dans un référentiel Github privé, et derrière un mot de passe sur le .dev domaine de mon site.

capture d'écran de la bibliothèque de composants Skeleton

J'ai nommé la bibliothèque «Skeleton» et je l'ai construite avec Fractal. J'utilise Fractal depuis quelques années maintenant. Je l'ai choisi par rapport à d'autres outils de bibliothèque de modèles car il correspondait parfaitement à mes besoins – je voulais un outil qui n'était pas assez libre et suffisamment flexible pour me permettre de configurer et de structurer mon projet comme je le souhaitais. Fractal correspond parfaitement à la description car il est agnostique quant à la façon dont je développe ou aux outils que j'utilise. Et j'ai été encore vendu après avoir lu comment Rachel Andrew l'utilisait pour gérer CSS en utilisant une approche basée sur le modèle, qui était exactement ce que je voulais. J'aime particulièrement ça les composants peuvent être imbriqués dans des dossiers pour faciliter la recherche de composants particuliers, et la façon dont vous structurez les dossiers dépend entièrement de vous.

J'organise mes modèles afin que chaque modèle se trouve dans son propre répertoire, contenant le modèle HTML du composant, le CSS et les fichiers JavaScript vanilla, ainsi que tous les actifs spécifiques à Fractal (tels que les fichiers de configuration).

capture d'écran partielle de la structure des dossiers dans ma bibliothèque de composants

En utilisant cette structure, chacun de mes modèles est autonome. Et je peux inclure et concaténer les styles et les scripts du motif dans mes projets selon mes besoins.

/* styles.scss */

@import "accordion";
@import "modal";

Pour citer Tyler Sticka dans «Astuces pour les modèles portables»: Les patterns, comme les chansons, sont plus faciles à remixer lorsque chaque piste master est séparée.


Mon objectif en créant cette bibliothèque est de créer un outil qui me permet de créer des prototypes plus rapidement, et qui est suffisamment flexible et efficace pour être utilisé dans différents projets. Et comme les motifs sont généralement stylisés différemment dans mes projets, je voulais un moyen de simplifier le processus de personnalisation ou de «configuration» pour chaque projet. Entrez les variables CSS.

Paramètres des composants étendus

Parce que je ne veux pas passer beaucoup de temps à remplacer et annuler des styles lorsque j'utilise un motif dans un nouveau projet, j'ai créé cette bibliothèque avec les composants ayant peu ou pas de style par défaut – principalement blanc (pas de couleurs), espacement minimal , et uniquement les frontières lorsque cela est visuellement approprié. Les motifs ressemblent donc littéralement à des squelettes, d'où le nom. Maintenant, lorsque j'ai besoin d'utiliser l'un de ces composants, j'ai peu de CSS à remplacer avant qu'ils ne soient prêts à être connectés au nouveau projet.

Pour chaque motif, je me suis retrouvé à modifier les mêmes propriétés chaque fois que je devais l'utiliser – comme la police, les couleurs (texte, arrière-plan, bordure), l'ombre de la boîte, l'espacement, etc. J'ai donc pensé que ce serait utile et temps- enregistrer si j'ai créé des variables pour ces propriétés, définir ces variables dans la «racine» du composant et «transmettre» les valeurs de ces variables lorsque j'utilise le modèle selon mes besoins. De cette façon, je peux personnaliser ou créer un thème pour le composant en modifiant les valeurs des propriétés dans un seul jeu de règles, au lieu de devoir passer de plusieurs pour le faire.

J'utilise des variables pour abstraire tous les styles que j'ai généralement besoin de remplacer. Ainsi, chaque propriété qui change d'un projet à l'autre est généralement «promue» en une variable. Ensuite, si, à un moment quelconque du projet, j'ai besoin de modifier le (s) style (s) d'un motif, je sais exactement où le faire. Cela rend les styles de chaque modèle plus lisibles et plus faciles à gérer, ce qui est encore plus important lorsque quelqu'un d'autre doit modifier le CSS.

Cette approche fonctionne assez bien avec mon approche de l'organisation de mes fichiers CSS. J'aime organiser mon CSS dans des feuilles de style distinctes par modèle, qui incluent tous les styles et le comportement réactif du modèle. Il y aura des exceptions à cette règle … par exemple, les styles pour les "atomes" (comme les boutons, les champs de saisie, etc.) qui sont réutilisés à travers les motifs sont définis dans une feuille de style. Et même alors, lorsque le style d'un atome devient un peu complexe (par exemple, le style d'une entrée de téléchargement de fichier personnalisé), je peux créer une feuille de style distincte pour cela. Je vais entrer dans un peu plus de détails sur la façon dont j'organise mon CSS dans un autre article.

Exemple

Comme la plupart d’entre vous, je me retrouve à créer un