Couleur THEMING avec les propriétés personnalisées CSS et le vent arrière

Les propriétés personnalisées CSS améliorent non seulement l'efficacité du code, mais créent également plus de possibilités dans CSS, en particulier dans la conception du thème. L'équipe atomique Smash utilise Tailwind CSS (un cadre de classe de services publics). Cet article explorera comment utiliser les propriétés personnalisées pour la conception du thème et comment l'intégrer au vent arrière pour maximiser la réutilisabilité de votre code. Cet article n'expliquera pas l'introduction au vent arrière - veuillez consulter la documentation officielle - mais même si vous êtes nouveau dans le vent arrière, vous pouvez trouver des conseils utiles.

Aperçu du sujet

Supposons que nous ayons un composant "CTA" qui contient le titre, le corps et les boutons.

L'écriture d'un CSS régulier (non-Tailwind) pour ce jeu de couleurs ressemble à ceci:

 <code>.cta { background-color: #742a2a; // 深红色 color: #ffffff; // 白色}  .cta__heading { background-color: #e53e3e; // 中等红色 color: #742a2a; } .cta__button { background-color: #e53e3e; }</code>

Avec le vent arrière, nous appliquerons ces couleurs comme cours d'utilité en HTML:

<code><div>
<h3 id="Rejoignez-notre-liste-de-diffusion">Rejoignez notre liste de diffusion</h3>
<div>
<p>Obtenez le premier à connaître nos nouveaux produits</p>
  registre</div>
</div></code>

J'ai délibérément omis des classes qui ne sont pas liées à la palette de couleurs de base, mais vous pouvez voir l'exemple complet dans cette démo:

Maintenant, si nous voulons appliquer un schéma de couleurs différent à notre composant, nous devons remplacer la valeur de couleur du composant d'origine. En l'absence de vent arrière, une approche commune consiste à attacher la classe de thème au composant lui-même et à redéfinir la valeur de couleur dans la cascade. Ainsi, pour les composants avec la classe de modificateurs ".cta - Blue" (en utilisant la convention BEM), nous appliquerons la valeur CSS du jeu de couleurs bleu:

 <code>.cta--blue { background-color: #2a4365; // 深蓝色} .cta--blue .cta__heading { background-color: #3182ce; // 中等蓝色 color: #2a4365; } .cta--blue .cta__button { background-color: #3182ce; }</code>

Si nous utilisons SASS ou d'autres préprocesseurs, nous pouvons utiliser des variables pour simplifier notre travail, et nous pourrions nid .CTA__heading et .CTA__Body Selectors. Cela ne rend pas notre code plus concis, mais en mettant à jour ces valeurs en un seul endroit, cela rend le code plus gérable.

Maintenant, disons que nous avons 10 schémas de couleurs différents, comme je l'ai vécu dans un projet récemment. Notre code commence à s'allonger car nous avons essentiellement répété l'exemple ci-dessus 10 fois avant de modifier ces valeurs de couleur. Imaginez maintenant que chaque composant de notre système de conception nécessite 10 schémas de couleurs, et de nombreux composants sont beaucoup plus complexes que notre simple CTA. Peut-être que notre thème a également besoin de différentes polices. Soudain, nous devons écrire beaucoup de CSS.

Utilisez le vent arrière pour la conception du thème

D'un autre côté, si nous utilisons Tailwind, nous devons changer plusieurs classes dans le HTML lui-même. Même si nous utilisons des frameworks JavaScript (comme React ou Vue), ce n'est pas une tâche facile. Pour s'assurer que les styles inutilisés sont supprimés dans les versions de production, le vent arrière décourage l'utilisation de la concaténation des chaînes pour créer des noms de classe (au moment de la rédaction). Ainsi, la construction de nos sujets pourrait signifier ajouter beaucoup de logique à nos composants.

Utilisez des propriétés personnalisées pour la conception du thème

En utilisant des propriétés personnalisées pour nos thèmes de couleur, nous pouvons réduire considérablement la quantité de code qui doit être écrite et réduire le fardeau de maintenance. Voyons d'abord comment procéder dans CSS ordinaire.

Nous définissons l'attribut personnalisé comme: une variable sur le sélecteur de racines, ce qui en fait une variable globale. (Le sélecteur de corps s'applique également.) Nous pouvons ensuite utiliser ces variables pour remplacer la valeur d'attribut de couleur dans le sélecteur:

 <code>:root { --primary: #742a2a; // 深红色 --secondary: #e53e3e; // 中等红色} .cta { background-color: var(--primary); color: white; } .cta__heading { background-color: var(--secondary); color: var(--primary); } .cta__button { background-color: var(--secondary); }</code>

C'est là que c'est vraiment magique: la création de code pour chaque sujet nécessite simplement la mise à jour de ces valeurs d'attribut personnalisées. Peu importe où nous appliquons la classe de thème, la nouvelle valeur sera héritée:

 <code>.th-blue { --primary: #2a4365; // 深蓝色 --secondary: #3182ce; // 中等蓝色}</code>

Si nous voulons un schéma de couleurs bleu, nous pouvons appliquer la classe .th-bleue au composant, et même dans Utilisez-le sur la balise pour appliquer le thème à l'échelle de la page, puis le remplacer sur des composants individuels au besoin. L'utilisation de classes utilitaires peut nous sauver plus de l'effort d'écriture de code que les classes spécifiques aux composants (telles que .CTA - Blue dans le code d'origine), car il peut être appliqué n'importe où dans notre base de code.

Gérer les navigateurs hérités

Comme de nombreuses agences, de nombreux clients atomiques Smash ont toujours besoin de notre support pour Internet Explorer 11. Bien que je puisse accepter des méthodes d'amélioration progressives dans la plupart des cas (par exemple, en fournissant une disposition de secours plus simple pour les navigateurs qui ne prennent pas en charge le réseau CSS), j'ai trouvé que la conception du thème était un domaine qui ne permet généralement pas de compromis. Les clients veulent voir les couleurs et les polices de leur marque, même sur des navigateurs plus anciens. Fournir une repli avec une requête de fonctionnalité nécessitera beaucoup de travail supplémentaire, ce qui compensera les avantages de l'utilisation de propriétés personnalisées. Pour surmonter ce problème, nous avons besoin d'un polyfill.

Il existe plusieurs options pour fournir des polyfills pour les propriétés personnalisées dans IE 11.

PostCSS-Custom-Properties

La première consiste à utiliser un plugin PostCSS appelé PostCSS-Custom-Properties. Si vous utilisez déjà PostCSS dans votre flux de travail, l'ajout de ce plugin est assez simple. Il fonctionne en traitant votre CSS et en sortie du résultat de la variable en tant que valeurs de propriété. Donc, si vous avez le CSS suivant:

 <code>:root { --color: red; } h1 { color: var(--color); }</code>

Le résultat après le traitement sera:

 <code>h1 { color: red; color: var(--color); }</code>

Les navigateurs qui ne prennent pas en charge les propriétés personnalisées ignoreront la deuxième règle et retomberont à la valeur de la propriété ordinaire. Il existe également une option pour supprimer des règles avec des propriétés personnalisées de la sortie, de sorte que la taille du fichier sera plus petite. Cela signifie qu'aucun navigateur n'obtient des propriétés personnalisées - c'est un problème si vous mettez à jour les variables dynamiquement, mais vous pouvez les utiliser pour des valeurs statiques dans votre code sans effets indésirables.

Malheureusement, ce polyfill a certaines limites:

1. Vous devez spécifier un fichier (ou un fichier) qui définit les propriétés personnalisées dans la configuration.
2. Les propriétés personnalisées ne peuvent être définies que sur le: sélecteur de racines.

La première limite est relativement insignifiante, mais la seconde rend malheureusement ce polyfill complètement inutile pour nos cas d'utilisation de la conception de sujet. Cela signifie que nous ne pouvons pas redéfinir les variables sur le sélecteur pour créer notre sujet.

IE11CustomProperties

Cette option polyfill implique de fournir des scripts clients au lieu de prétraiter CSS. Nous pouvons ajouter le script suivant à notre tête pour nous assurer que Polyfill se charge uniquement dans IE 11:

 <code>window.MSInputMethodContext && document.documentMode && document.write('');</code>

Cela nous permet de profiter des propriétés personnalisées comme nous l'avons fait dans l'exemple ici, c'est donc la solution que j'ai décidé d'utiliser. Il a une limitation que les propriétés personnalisées définies dans l'attribut de style ne seront pas polyvalentes. Mais je l'ai testé par rapport à l'exemple de conception de sujet ci-dessus et cela fonctionne bien.

Mais qu'est-ce que cela a à faire avec le vent arrière?

Comme nous l'avons vu, les classes de services publics - des classes à un usage qui peuvent être appliquées n'importe où en HTML - peuvent rendre notre code plus réutilisable. Il s'agit du principal argument de vente du vent arrière et d'autres cadres de classe de services publics - la taille du fichier CSS que vous offrez finalement deviendra plus petit en conséquence. Tailwind fournit plusieurs classes de couleurs: .bg-red-medium nous donnera la valeur de propriété en arrière-plan rouge, .Text-red-medium est pour la couleur, etc., pour la bordure, la box-shadow, ou partout où vous pouvez penser à l'endroit où les valeurs de couleur peuvent être nécessaires.

Les couleurs peuvent être définies dans le fichier de configuration:

 <code>module.exports = { theme: {  colors: {   red: {    medium: '#e53e3e',    dark: '#742a2a'   },   blue: {    medium: '#3182ce',    dark: '#2a4365'   }  } } }</code>

Si nous souhaitons utiliser des valeurs de propriété personnalisées pour notre classe de vent arrière, nous pouvons les spécifier dans la configuration:

 <code>module.exports = { theme: {  colors: {   'th-primary': 'var(--primary)',   'th-secondary': 'var(--secondary)'  } } }</code>

J'ai préfixé les noms de classe liés au sujet, il est donc évident qu'ils sont particulièrement pertinents pour la conception du sujet, mais vous pouvez vous sentir libre d'utiliser toute convention qui vous convient.

Nous pouvons maintenant utiliser ces classes via le vent arrière. L'utilisation de .bg-th primaire équivaut à l'écriture:

 <code>.some-element { background-color: var(--primary); }</code>

Dans notre CSS, nous pouvons définir les propriétés personnalisées du thème comme avant:

 <code>:root { --primary: #742a2a; --secondary: #742a2a; } .th-blue { --primary: #2a4365; --secondary: #3182ce; }</code>

Appliquons ces cours à notre HTML. Le premier exemple nous fournit un composant avec un thème par défaut (variables définies sur: root). Le second a notre thème bleu. La seule différence est que la classe .th-bleue a été ajoutée au composant. (Pour la simplicité et la clarté, j'ai omis des classes qui ne sont pas liées au sujet.)

<code><div class="bg-th-primary text-white">
<h3 id="Rejoignez-notre-liste-de-diffusion">Rejoignez notre liste de diffusion</h3>
<div>
<p>Obtenez le premier à connaître nos nouveaux produits</p>
<button class="bg-th-secondary">registre</button>
</div>
</div>


<div class="th-blue bg-th-primary text-white">
<h3 id="Rejoignez-notre-liste-de-diffusion">Rejoignez notre liste de diffusion</h3>
<div>
<p>Obtenez le premier à connaître nos nouveaux produits</p>
<button class="bg-th-secondary">registre</button>
</div>
</div></code>

Utilisation de la configuration comme guide de style

Tailwind vous encourage à définir toutes les variables de votre configuration, et personnellement, je suis d'accord que c'est une meilleure approche. Cela signifie que le fichier de configuration peut être une seule source de fait, plutôt que (probablement) se retrouver avec plusieurs endroits pour définir la couleur et d'autres valeurs de thème. Heureusement, nous pouvons également utiliser les valeurs dans le fichier de configuration du vent arrière pour nos propriétés personnalisées. Nous devons d'abord définir toutes les couleurs de la configuration (en supposant que nous n'utilisons pas la palette par défaut incluse par Tailwind):

 <code>module.exports = { theme: {  colors: {   red: {    medium: '#e53e3e',    dark: '#742a2a'   },   blue: {    medium: '#3182ce',    dark: '#2a4365'   },   'th-primary': 'var(--primary)',   'th-secondary': 'var(--secondary)'  } } }</code>

Ensuite, nous pouvons accéder à l'objet thème dans CSS:

 <code>:root { --primary: theme('colors.red.dark'); --secondary: theme('colors.red.medium'); } .th-blue { --primary: theme('colors.blue.dark'); --secondary: theme('colors.blue.medium'); }</code>

Résumer

Je suis tellement heureux de pouvoir utiliser des propriétés personnalisées sans me soucier du support du navigateur, et je suis encore plus heureux de pouvoir l'intégrer de manière transparente à nos flux de travail existants. Il est difficile d'exagérer le temps qu'ils nous sauveront en termes de conception de thème. J'espère que même si vous n'êtes pas un utilisateur de vent arrière, cet article peut vous encourager à essayer des propriétés personnalisées pour ce cas d'utilisation.

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!