Ne combattez pas la cascade, contrôlez-la!

Maître la cascade CSS: dites au revoir au chaos et embrassez le contrôle! Cet article explorera comment utiliser les nouvelles fonctionnalités CSS pour contrôler les cascades pour écrire le code CSS plus concis et plus efficace. Dans le passé, les styles provenant de différentes sources ont souvent rendu les cascades difficiles à gérer et ont finalement produit du code redondant. Même avec des méthodes comme ITCSS et BEM, nous sommes toujours confrontés à des défis posés par les cascades, tels que la nécessité de contrôler avec précision la position de la déclaration @import ou de recourir !important Heureusement, de nouveaux outils sont sortis, ce qui nous permet de contrôler efficacement la cascade.

Drive :where pseudo sélecteur

:where le pseudo-électror nous permet de supprimer la particularité du sélecteur afin qu'il ne soit plus élevé que le style par défaut de l'agent utilisateur, quel que soit l'ordre de chargement CSS. Cela signifie que la particularité du sélecteur est en fait nul, ce qui est très utile pour les composants à usage général.

Par exemple, utilisez :where définir un style de table commun:

 : où (table) {
  Color en arrière-plan: Tan;
}

Même si d'autres styles de table étaient définis avant cela:

 tableau {
  Color en arrière-plan: hotpink;
}

: où (table) {
  Color en arrière-plan: Tan;
}

La couleur de l'arrière-plan du tableau est toujours tan car :where élimine la particularité du sélecteur. Cela fait :where parfait pour CSS réinitialise.

:where 's Brother Selector :is l'effet inverse:

La particularité du :is() pseudo-classe est déterminée par la particularité de ses paramètres les plus spéciaux. Par conséquent, les sélecteurs écrits avec :is() n'ont pas nécessairement la même spécialité que les sélecteurs équivalents écrits sans :is() . —— Spécification de niveau 4 de l'élector

Continuez avec l'exemple précédent:

 est (table) {
  --tbl-bgc: orange;
}
tableau {
  --TBL-BGC: Tan;
}
: où (table) {
  --tbl-bgc: hotpink;
  Color d'arrière-plan: var (- tbl-bgc);
}

La couleur d'arrière-plan de la table sera tan car :is la même particularité que table , et table est située derrière. Mais si nous le changeons en:

 est (table, .c-tbl) {
  --tbl-bgc: orange;
}

La couleur d'arrière-plan sera orange parce que :is le même poids que son sélecteur le plus spécial.c .c-tbl .

Exemple: composants de table configurables

Construisons un composant de table avec le HTML suivant:

Ensuite, nous enroulons .c-tbl dans :where sélecteur et ajoutant les coins arrondis:

 : où (.c-tbl) {
  Border-Collapse: séparé;
  Espacement des bordures: 0;
  Table-Layout: Auto;
  Largeur: 99,9%;
}

Les cellules de table utilisent différents styles:

 : où (.c-tbl thead th) {
  / * ... * /
}
: où (.c-tbl tbody td) {
  / * ... * /
}

En raison des coins arrondis et border-collapse: separate , nous devons ajouter des styles supplémentaires:

 : où (.c-tbl tr td: premier de type) {
  / * ... * /
}
/ * ... * /

Maintenant, nous pouvons créer des variations du composant de la table en injectant d'autres styles avant ou après le style général (bénéficie de :where 's Specialty Elimination):

 .c-tbl --purple th {
  Color en arrière-plan: HSL (330, 50%, 40%)
}
/ * ... * /

Propriétés personnalisées CSS

Nous utiliserons data-component pour définir le composant:

Des styles génériques seront appliqués à toutes les instances de composants, et les styles pour des instances de composants spécifiques seront inclus dans la classe générale, et les propriétés personnalisées du composant commun sont utilisées.

 : où ([data-component = "table"]) {
  / * ... * /
}
.c-tbl --puple {
  / * ... * /
}

Dans un composant commun, chaque propriété CSS pointe vers une propriété personnalisée. Les attributs qui doivent agir sur des éléments enfants (tels que border-color ) sont spécifiés à la racine de la composante générale:

 : où ([data-component = "table"]) {
  --tbl-hue: 200;
  / * ... * /
}
: où ([data-component = "table"] td) {
  Border-Color: var (- TBL-BDC);
}

D'autres propriétés peuvent être définies des valeurs statiques ou configurées à l'aide de propriétés personnalisées. Si vous utilisez des propriétés personnalisées, n'oubliez pas de définir une valeur par défaut pour une utilisation lorsque des classes de variantes sont manquantes.

 : où ([data-component = "table"]) {
  Color d'arrière-plan: var (- tbl-bgc, transparent);
  / * ... * /
}

Nous pouvons utiliser des propriétés personnalisées pour contrôler l'alignement et la largeur des colonnes:

 : où ([data-component = "table"] tr> *: nth-of-type (1)) {
  Text-Align: var (- CA1, initial);
  / * ... * /
}

Maintenant, créons un style de composant spécifique, en utilisant la classe régulière .c-tbl :

 .c-tbl {
  --tbl-hue: 330;
}

Nous avons juste besoin de mettre à jour les propriétés sans écrire un tout nouveau CSS! Modifiez une propriété pour mettre à jour la couleur de la table.

Nous pouvons écrire des styles plus complexes, tels que les rayures zébrées:

 .c-tbl tr: nth-child (même) td {
  --tbl-td-bgc: hsl (var (- tbl-hue), var (- tbl-sat), 95%);
}

Ajouter des paramètres à l'aide d'un autre data-attribute

Nous pouvons ajouter une autre propriété data-param pour ajouter plus de paramètres:

Ensuite, dans CSS, nous pouvons utiliser le sélecteur de propriétés pour faire correspondre le mot entier dans la liste des paramètres. Par exemple, une rangée de rayures zébrés:

 [data-component = "Table"] [Data-Param ~ = "Zebrarow"] tr: nth-child (même) td {
  --tbl-td-bgc: var (- tbl-zebra-bgc);
}

Ou colonne de bandes zébrés:

 [data-component = "Table"] [Data-Param ~ = "Zebracol"] TD: Nth-of-Type (Odd) {
  --tbl-td-bgc: var (- tbl-zebra-bgc);
}

Couche en cascade

Le dernier outil pour contrôler la cascade est la "Couche de cascade". Actuellement, il s'agit d'une caractéristique expérimentale qui peut être accessible dans Safari ou Chrome pour activer le drapeau #enable-cascade-layers .

La couche de cascade nous permet d'injecter des feuilles de style dans un ordre spécifique. Une structure simplifiée est la suivante:

 @layer générique, composants;

Cela détermine l'ordre des couches. Il y a d'abord un style général, puis un style spécifique aux composants.

Même si le style de composant est écrit avant le style général, le calque de style composant a toujours la priorité:

 @layer Components {
  corps {
    Color en arrière-plan: LightEagreen;
  }
}

@layer générique { 
  corps {
    Color en arrière-plan: tomate;
  }
}

Résumer

:where et :is pseudo-selecteurs nous permettent data-attribute contrôler la spécificité; CSS Cascade n'est plus un ennemi, mais un outil que nous pouvons contrôler.

Image de Stephen Leonardi sur Unsplash

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!