Organisation des modèles de composants du système de conception avec des couches de cascade CSS

Cet article explique comment utiliser la couche CSS Cascade pour améliorer la personnalisation, l'efficacité, la facilité d'utilisation et la facilité de compréhension des composants.

Je suis passionné par l'organisation du code et je constate que la cascade est un excellent moyen d'organiser explicitement votre code car il suit directement l'ordre de lecture de la cascade. Encore mieux, en plus d'aider avec les organisations "de haut niveau", les cascades peuvent également être imbriquées, ce qui nous permet d'écrire des styles plus précis basés sur des cascades.

Le seul inconvénient est votre imagination - rien ne peut nous empêcher de trop concevoir CSS. Pour être clair, vous penserez probablement que ce que je vais montrer est une sur-conception. Mais je pense que j'ai trouvé un point d'équilibre, gardé les choses simples et organisées, et je suis heureux de partager mes résultats.

Composition du mode composant CSS

Utilisons les boutons comme exemple pour explorer le modèle d'écriture des composants à l'aide de CSS. Les boutons sont l'un des composants les plus populaires de presque toutes les bibliothèques de composants. Il y a une raison à cette popularité, car les boutons peuvent être utilisés dans une variété de cas d'utilisation, notamment:

• Effectuer une action, comme l'ouverture d'un tiroir,
• Accédez à différentes parties de l'interface utilisateur, et
• Gardez un état, comme la concentration ou le plan de volant.

et les boutons se présentent sous de nombreuses formes de marquage différentes, telles que <button></button>, input[type="button"] et <a></a>. Si vous croyez, il existe encore plus de façons de fabriquer des boutons.

Plus important encore, différents boutons remplissent différentes fonctions et sont généralement stylisés en conséquence afin que les boutons d'une opération se distinguent des boutons d'une autre opération. Les boutons répondent également aux changements d'état, comme lorsqu'ils planent, se déplacent et se concentrent. Si vous avez déjà écrit CSS en utilisant la syntaxe BEM, nous pouvons réfléchir à une idée similaire dans le contexte de la couche de cascade.

D'accord, écrivons du code maintenant. Plus précisément, créons plusieurs types de boutons différents. Nous commencerons par une classe

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

que nous pouvons définir sur n'importe quel élément que nous voulons définir en tant que bouton! Nous savons déjà que les boutons se présentent sous de nombreuses formes de balises différentes, donc la classe commune

est la façon la plus réutilisable et extensible de choisir un ou tous ces boutons. .button .button

en utilisant des cascades

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

Ici, nous pouvons insérer notre première couche en cascade! N'oubliez pas que la raison pour laquelle nous voulons d'abord la couche en cascade est qu'elle nous permet de définir l'ordre de lecture de la cascade CSS lors de l'évaluation du style. Nous pouvons dire à CSS d'évaluer d'abord une couche, puis une autre couche, puis une autre couche - le tout dans l'ordre que nous voulons. Il s'agit d'une fonctionnalité incroyable qui nous donne des super pouvoirs pour contrôler les styles que le navigateur s'applique à "Win".

Nous nommons ce calque components parce que le bouton est un composant. La raison pour laquelle j'aime le nom est qu'il est suffisamment générique pour prendre en charge d'autres composants que nous ajouterons à l'avenir lorsqu'ils décident d'étendre le système de conception. Il évolue avec nous tout en maintenant une bonne séparation de préoccupation des autres styles que nous écrivons à l'avenir qui ne sont peut-être pas spécifiques aux composants.

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

cascades imbriquées

où les choses deviennent un peu bizarres est ici. Saviez-vous que vous pouvez nidifier les couches de cascade à l'intérieur de la classe ? C'est une chose totale. Donc, en regardant cela, nous pouvons introduire une nouvelle couche à l'intérieur de la classe qui est déjà située dans sa propre couche. C'est ce que je veux dire: .button En fin de compte, c'est ainsi que le navigateur interprète la couche intérieure:

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

Ce message ne concerne pas seulement les styles imbriqués, donc je veux juste dire que votre kilométrage peut varier lorsque vous le faites. Découvrez l'article récent d'Andy Bell sur l'utilisation de styles imbriqués avec prudence.

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

Structure de style

Jusqu'à présent, nous avons établi une classe

dans une couche de cascade conçue pour accueillir tout type de composants de notre système de conception. À l'intérieur de cela

se trouve une autre couche de cascade utilisée pour sélectionner différents types de boutons que nous pouvons rencontrer dans la balise. Nous avons discuté auparavant que les boutons sont

, .button ou .button, c'est ainsi que nous choisissons de styliser chaque type individuellement. <button></button> <input> Nous pouvons utiliser la fonction <a></a> Pseudo-Selector, qui est similaire à dire: "Si ce

est un élément :is() un .button, alors ces styles sont appliqués." <a></a> Définissez le style de bouton par défaut

<code>/* 组件顶级层 */
@layer components {

  .button {
    /* 组件元素层 */
    @layer elements {
      /* 样式 */
    }
  }
}</code>

Je vais remplir notre code avec un style universel qui fonctionne pour tous les boutons. Ces styles sont situés en haut de la couche d'élément, ils seront donc appliqués à tous les boutons quel que soit le marquage. Ils peuvent être considérés comme le style de bouton par défaut.

Définir le style d'état du bouton

<code>@layer components {
  @layer elements {
    .button {
      /* 按钮样式... */
    }
  }
}</code>

Que devraient faire les utilisateurs lorsqu'ils interagissent avec le bouton par défaut? Ce sont les différents états que les boutons peuvent prendre lorsque l'utilisateur interagit avec eux, et nous devons les styliser en conséquence.

Je vais créer une nouvelle sous-couche en cascade directement sous la sous-couche d'élément, appelée de manière créative "States" (État):

Arrête et pensez-y ici. Quels états devons-nous cibler? Que voulons-nous changer pour chacun de ces États?

Certains états peuvent partager des changements de propriété similaires, tels que :hover et :focus avec la même couleur d'arrière-plan. Heureusement, CSS nous fournit des outils pour résoudre ces problèmes, en utilisant la fonction :where() pour regrouper les changements de propriété en fonction de l'état. Pourquoi utiliser :where() au lieu de :is()? :where() a une spécificité nulle, ce qui signifie qu'il est plus facile à couvrir que , en prenant la spécificité de l'élément avec le score de spécificité le plus élevé dans ses paramètres. Garder la spécificité faible est une vertu lors de l'écriture de CSS évolutifs et maintenables. :is() :is()

Mais comment mettre à jour le style du bouton de manière significative? Je veux dire, comment pouvons-nous nous assurer que le bouton ressemble à planer ou à se concentrer? Nous avons juste besoin d'y ajouter une nouvelle couleur d'arrière-plan, mais idéalement, la couleur doit être liée à la

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

définie dans la couche d'élément.

Alors, refactorons-le un peu. Auparavant, j'ai défini le de l'élément background-color sur

. Je veux réutiliser la couleur, il est donc préférable de le convertir en variable CSS afin que nous puissions le mettre à jour immédiatement et le faire s'appliquer partout. Dépenser les variables est un autre avantage de l'écriture CSS évolutive et maintenable.

.button Je vais créer une nouvelle variable appelée background-color qui est initialement définie sur darkslateblue, puis le définir sur le style du bouton par défaut:

--button-background-color Maintenant que nous avons stocké les couleurs en variables, nous pouvons définir la même variable sur l'état de survol et de mise au point du bouton dans d'autres couches, convertissant darkslateblue en une couleur plus claire en utilisant la fonction relativement nouvelle

, lorsque le bouton est plané ou focalisé.

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

Retour à notre couche d'état! Nous mélangeons d'abord les couleurs dans une nouvelle variable CSS appelée color-mix(): darkslateblue

Nous pouvons ensuite appliquer cette couleur en mettant à jour l'attribut --state-background-color.

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

Définissez le style de bouton modifié background-color

En plus des éléments et des couches d'état, vous pouvez également rechercher un certain type de changements dans les composants, tels que les modificateurs. En effet, tous les boutons ne seront pas comme votre bouton par défaut. Vous voudrez peut-être un bouton avec une couleur d'arrière-plan vert pour que les utilisateurs confirment les décisions. Ou vous voudrez peut-être un bouton rouge qui indique le danger lors du clic. Nous pouvons donc prendre les styles de bouton par défaut existants et les modifier pour ces cas d'utilisation spécifiques.

<code>/* 组件顶级层 */
@layer components {

  .button {
    /* 组件元素层 */
    @layer elements {
      /* 样式 */
    }
  }
}</code>

Si nous considérons l'ordre des cascades - qui coule toujours de haut en bas - nous ne voulons pas que le style modifié affecte les styles de la couche d'état que nous venons de faire. Ajoutons donc une nouvelle couche de modificateur entre l'élément et l'état:

Semblable à la façon dont nous gérons l'état, nous pouvons maintenant mettre à jour la variable

pour chaque modificateur de bouton. Bien sûr, nous pouvons modifier davantage le style, mais nous le gardons assez simple pour démontrer comment fonctionne ce système.

Nous créerons une nouvelle classe qui modifie le bouton par défaut background-color de darkslateblue à darkgreen. Encore une fois, nous pouvons compter sur le sélecteur :is() car dans ce cas, nous avons besoin d'une spécificité accrue. De cette façon, nous pouvons remplacer le style de bouton par défaut avec la classe de modificateurs. Nous appelons cette classe .success (le vert est la couleur du "succès") et le fournissons à :is():

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

Si nous ajoutons la classe .success à l'un de nos boutons, il deviendra darkgreen au lieu de darkslateblue, ce qui est exactement ce que nous voulons. Étant donné que nous avons effectué des opérations color-mix() dans la couche d'état, nous hériterons automatiquement de ces styles de survol et de mise au point, ce qui signifie que darkgreen deviendra superficiel dans ces États.

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

Intégrer tout ensemble

Nous pouvons refacter les attributs CSS qui doivent être modifiés en attributs personnalisés CSS, qui nous fournit beaucoup d'espace de personnalisation.

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

Veuillez noter: examinez de plus près la démo et voyez comment j'ai ajusté le fond du bouton en utilisant light-dark() - et lisez le côté "Come to the Light-Dark () de Sara Joy pour avoir une vue complète sur son fonctionnement!

Que pensez-vous? Allez-vous l'utiliser pour organiser votre style? Pour un petit projet avec peu de composants, la création d'un système en cascade peut être trop. Mais même un petit essai comme nous l'avons fait, peut montrer à quel point nous avons dans la gestion des cascades CSS - ou même l'apprivoisement -. Les boutons sont trompeusement complexes, mais nous voyons combien de styles sont nécessaires pour gérer les styles, des styles par défaut à l'écriture de leur état et des versions modifiées.

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!