Différents degrés d'utilisation de propriétés personnalisées

Une façon d'utiliser des propriétés personnalisées est de les considérer comme des jetons de conception: couleurs, espacement, polices, etc. Vous pouvez les définir à la racine de la page et les utiliser dans tout le CSS. Très utile et au cours des dernières années, non seulement des propriétés personnalisées, mais des cas d'utilisation classiques pour les variables de préprocesseur.

Une autre façon d'utiliser (qui peut être utilisée en conjonction avec la méthode du jeton de conception) consiste à les utiliser plus en détail pour chaque choix de style unique majeur sur un élément donné.

Supposons que vous ayez une carte comme celle-ci (simplifiée à des fins de démonstration):

 <code>.card { background: hsl(200deg 15% 73%); border: 4px solid rgb(255 255 255 / 0.5); padding: 2rem; border-radius: 8px; } .card > h2 { margin: 0 0 1rem 0; border-bottom: 3px solid rgba(0 0 0 / 0.2); }</code>

très bien.

Cependant, lorsque vous faites inévitablement des variations de cartes, vous devez remplacer ces ensembles de règles vous-même. La méthode d'attribut personnalisée CSS peut être comme ceci:

 <code>.card { --card-background: hsl(200deg 15% 73%); --card-border: 4px solid rgb(255 255 255 / 0.5); --card-padding: 2rem; --card-border-radius: 8px; --card-title-margin: 0 0 1rem 0; --card-title-border: 3px solid rgba(0 0 0 / 0.2); background: var(--card-background); border: var(--card-border); padding: var(--card-padding); border-radius: var(--card-border-radius); } .card > h2 { margin: var(--card-title-margin); border-bottom: var(--card-title-border); }</code>

Pour le moment, c'est un peu plus long, mais regardez ce qui se passe lorsque nous voulons faire une variation:

 <code>.card-variation { --card-background: purple; --card-padding-block: 2.5rem; --card-title-margin: 0 0 2rem 0; }</code>

Voici trois avantages évidents:

• J'ai changé uniquement les valeurs qui sont explicitement définies sur modifiables. Mon prototype de carte principale maintient l'intégrité que je veux qu'il maintienne.
• Je peux styliser les éléments enfants de la variante sans réécrire correctement ces sélecteurs.
• Je peux maintenant passer des remplacements de style à partir de l'attribut de style en HTML pour une variante rapide.

Utiliser le secours pour réduire la redondance

Au lieu de déclarer des propriétés personnalisées en haut, puis de les utiliser ci-dessous, je peux le faire en même temps de cette manière:

 <code>.card { background: var(--card-background, hsl(200deg 15% 73%)); border: var(--card-border, 4px solid rgb(255 255 255 / 0.5)); padding: var(--card-padding, 2rem); border-radius: var(--card-border-radius, 8px); } .card > h2 { margin: var(--card-title-margin, 0 0 1rem 0); border-bottom: var(--card-title-border, 3px solid rgba(0 0 0 / 0.2)); }</code>

Maintenant, si une propriété comme --Card-Background est définie, elle remplacera la valeur de secours ici. Je n'aime pas tout à fait cela car cela signifie que l'élément au-dessus de la carte. C'est peut-être ce que vous voulez, mais ce n'est pas exactement la même chose que de déclarer la valeur au niveau de la carte au début. Il n'y a pas d'opinion forte ici.

Décomposition supplémentaire

Un exemple ici est que vous voudrez peut-être contrôler le rembourrage séparément.

 <code>.card { --card-padding-block: 2rem; --card-padding-inline: 2rem; --card-padding: var(--card-padding-block) var(--card-padding-inline); padding: var(--card-padding); }</code>

Maintenant, si je veux, la variante ne peut contrôler qu'une partie du rembourrage:

 <code>.card-variation { --card-padding-inline: 3rem; }</code>

Mais vous devez être conscient d'un gros problème. Cela signifie que si vous déclarez tout cela à la racine, cela ne fonctionnera pas parce que ces propriétés imbriquées ont été analysées. Mais tant qu'il est déclaré sur la carte. Tout d'abord, tout ira bien ici.

En faire trop?

Supposons que vous souhaitiez avoir un contrôle ultra-ultime sur chaque partie de la valeur. Par exemple:

 <code>html { --color-1-h: 200deg; --color-1-s: 15%; --color-1-l: 73%; --color-1-hsl: var(--color-1-h) var(--color-1-s) var(--color-1-l); --color-1: hsl(var(--color-1-hsl)); }</code>

C'est un peu intelligent, mais c'est peut-être trop. Les couleurs seront presque certainement déclarées à la racine et resteront inchangées, donc ce gros problème rendra impossible l'écrasement des sous-propriétés de bas niveau. De plus, si vous avez - Color-1, vous avez probablement 2-9 (ou plus), ce qui est génial car le système de couleur est beaucoup plus raffiné que les mathématiques de la partie de couleur simple.

Système de conception livrable?

Il ne fait aucun doute que le vent arrière est très populaire. Il utilise des méthodes atomiques, où un grand nombre de classes HTML contrôlent séparément une propriété. Je pense qu'une partie de la raison pour laquelle il est populaire est que si vous choisissez parmi ces cours préconfigurés, le design finit par être assez bon. Vous ne pouvez pas vous éteindre. Vous choisissez parmi une gamme de valeurs finies conçues pour la rendre belle.

Je ne dirais pas que la méthode de style basée sur les propriétés personnalisées est exactement la même. Par exemple, vous devez toujours considérer l'abstraction du nom de classe au lieu d'appliquer des styles directement sur les éléments HTML. Cependant, il peut profiter de certaines des mêmes contraintes / restrictions que les méthodes de vent de la queue et d'autres méthodes de classe atomique. Si vous ne pouvez choisir que parmi les valeurs prédéfinies - Espacement-X, les valeurs - Color-X et les valeurs --FONT-X, vous pouvez obtenir une conception plus cohésive que jamais.

Personnellement, je trouve qu'il fait du bien de se déplacer vers un système de conception qui s'appuie davantage sur des propriétés personnalisées - si rien ne facilite les variations et la couverture plus faciles à gérer que cela.

Comment les systèmes de conception tiers prennent-ils les fonctionnalités qu'ils fournissent en tant que ... juste un grand ensemble de propriétés personnalisées à utiliser à volonté?

Les livrables tiers ne doivent même pas inclure tout comme ça. Par exemple, la transition d'Adam Argyle. STATYLE fournit un "hackpack" qui est simplement une propriété personnalisée de l'assistant d'animation de transformation.

Coût de la compréhension

Un argument que j'ai entendu contre cette approche plus complète des propriétés personnalisées est la compréhension des nouvelles. Si vous avez écrit le système, cela pourrait vous avoir beaucoup de sens. Mais c'est une abstraction supplémentaire en plus de CSS. Toutes les personnes partagent les connaissances CSS, tandis que les connaissances du système personnalisé ne sont partagées que par des personnes activement impliquées dans le système.

Les systèmes qui sont nouveaux dans l'utilisation de propriétés personnalisées auront une courbe d'apprentissage très abrupte.

vidéo

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!