Catégories
Astuces et Design

Thème couleur avec les propriétés personnalisées CSS et Tailwind

Les propriétés personnalisées nous permettent non seulement de rendre notre code plus efficace, mais nous permettent également de faire de la vraie magie avec CSS. Un domaine où ils ont énorme le potentiel est le thème. Chez Atomic Smash, nous utilisons Tailwind CSS, un framework de classes utilitaires, pour écrire nos styles. Dans cet article, nous verrons comment les propriétés personnalisées peuvent être utilisées pour la création de thèmes et comment nous pouvons les intégrer à Tailwind pour maximiser la réutilisabilité de notre code. Nous ne couvrirons pas la mise en route de Tailwind – consultez la documentation officielle pour cela – mais même si vous êtes nouveau dans ce domaine, vous trouverez peut-être certains de ces conseils utiles.

Présentation du thème

Supposons que nous ayons un composant "Appel à l'action" (CTA) avec un en-tête, une copie du corps et un bouton.

Une boîte avec un en-tête rouge clair qui se lit rejoindre notre liste de diffusion au-dessus d'un corps rouge foncé qui se lit être le premier à entendre parler de nos nouvelles offres juste avant un bouton d'inscription rouge.

L'écriture de CSS standard (non Tailwind) pour ce jeu de couleurs ressemblerait à ceci:

.cta {
  background-color: #742a2a; // dark red
  color: #ffffff; //white
}
    
.cta__heading {
  background-color: #e53e3e; // medium red
  color: #742a2a;
}


.cta__button {
  background-color: #e53e3e;
}

En utilisant Tailwind, nous appliquerions ces couleurs en tant que classes utilitaires dans notre HTML:

 

Join our mailing list

 
   

Be the first to hear about our new offerings

     

J'ai délibérément omis les classes relatives à autre chose que la palette de couleurs de base, mais vous pouvez voir l'exemple dans son intégralité dans cette démo:

Maintenant, si nous voulions appliquer un jeu de couleurs différent à notre composant, nous aurions besoin de remplacer les valeurs de couleur de notre composant d'origine. Sans Tailwind, une façon courante de le faire serait d'ajouter une classe de thème au composant lui-même et de redéfinir les valeurs de couleur plus bas dans la cascade. Donc pour un composant avec une classe de modificateur de .cta--blue (en utilisant la convention BEM) nous appliquerons les valeurs CSS pour un jeu de couleurs bleu:

.cta--blue {
  background-color: #2a4365; // dark blue
}


.cta--blue .cta__heading {
  background-color: #3182ce; // medium blue
  color: #2a4365;
}


.cta--blue .cta__button {
  background-color: #3182ce;
}
Une boîte avec un en-tête bleu clair qui lit Rejoignez notre liste de diffusion au-dessus d'un corps bleu foncé qui indique être le premier à entendre parler de nos nouvelles offres juste avant un bouton d'inscription bleu.

Si nous utilisons Sass ou un autre préprocesseur, il est probable que nous nous simplifierons la vie en utilisant des variables pour ces noms de couleur, et nous pourrions imbriquer le .cta__heading et .cta__body sélecteurs. Cela ne rend pas exactement notre code plus concis, mais il le rend plus gérable en ayant un seul endroit pour mettre à jour ces valeurs.

Maintenant, supposons que nous ayons 10 combinaisons de couleurs différentes, comme ce fut mon expérience sur un projet récent. Notre code commence à s'allonger, car nous dupliquons essentiellement l'exemple ci-dessus 10 fois afin de modifier ces valeurs de couleur. Maintenant imaginez chaque composant de notre système de conception nécessite 10 schémas de couleurs, et nombre de ces composants sont beaucoup plus complexes que notre simple CTA. Peut-être que nos thèmes ont également besoin de polices différentes. Soudain, nous avons beaucoup de CSS à écrire.

Theming avec Tailwind

Si nous utilisons Tailwind, en revanche, nous devrons modifier plusieurs classes dans le code HTML lui-même. Même si nous utilisons un framework JavaScript, comme React ou Vue, ce n'est pas exactement une tâche triviale. Afin de s'assurer que les styles inutilisés sont supprimés dans une version de production, Tailwind déconseille l'utilisation de la concaténation de chaînes pour les noms de classe (au moment de l'écriture). Donc, construire nos thèmes signifie potentiellement empiler beaucoup de logique dans nos composants.

Thème avec des propriétés personnalisées

En utilisant des propriétés personnalisées pour nos thèmes de couleurs, nous pouvons réduire considérablement la quantité de code à écrire et alléger la charge de maintenance. Voyons d'abord comment nous pouvons le faire dans le CSS standard.

Nous définissons nos propriétés personnalisées comme des variables sur le sélecteur: root, ce qui en fait des variables globales. (Le sélecteur de corps nous servirait tout aussi bien.) Ensuite, nous pouvons utiliser ces variables dans un sélecteur, à la place de nos valeurs de propriété de couleur:

:root {
  --primary: #742a2a; // dark red;
  --secondary: #e53e3e; // medium red
}


.cta {
  background-color: var(--primary);
  color: white;
}


.cta__heading {
  background-color: var(--secondary);
  color: var(--primary);
}


.cta__button {
  background-color: var(--secondary);
}

C'est là que la vraie magie se produit: maintenant, le code de création de chacun de nos thèmes devient un cas de mise à jour de ces valeurs de propriétés personnalisées. Les nouvelles valeurs seront héritées partout où nous appliquerons notre classe de thème:

.th-blue {
  --primary: #2a4365; // dark blue
  --secondary: #3182ce; // medium blue
}

Si nous voulons un jeu de couleurs bleu, nous pouvons l'appliquer .th-blue classe au composant, ou même l'utiliser sur le à appliquer pour appliquer un thème à l'échelle de la page, qui peut être remplacé sur des composants individuels à volonté. L'utilisation d'une classe utilitaire nous évite potentiellement d'écrire encore plus de code par rapport à une classe spécifique à un composant (telle que .cta--blue dans le code d'origine), car il pourrait être appliqué n'importe où dans notre base de code.

Gérer les anciens navigateurs

Comme beaucoup d'agences, beaucoup de nos clients chez Atomic Smash nous demandent toujours de prendre en charge Internet Explorer 11. Bien que je sois d'accord avec une approche d'amélioration progressive dans la plupart des cas (en fournissant des mises en page de secours plus simples pour les navigateurs qui ne prennent pas en charge CSS Grid, pour exemple), je trouve que la thématisation est un domaine qui ne permet souvent pas de compromis facile. Les clients veulent voir les couleurs et les polices de leur marque, même sur les anciens navigateurs. Fournir des solutions de secours à l'aide de requêtes de fonctionnalités impliquerait beaucoup de travail supplémentaire qui annulerait les avantages de l'utilisation de propriétés personnalisées en premier lieu. Pour surmonter cela, nous avons besoin d'un polyfill.

Il existe plusieurs options pour le polyfilling des propriétés personnalisées dans IE 11.

postcss-custom-properties

Le premier utilise un plugin PostCSS appelé postcss-custom-properties. Si vous utilisez déjà PostCSS dans votre flux de travail, cela est assez simple à ajouter. Cela fonctionne en traitant votre CSS et en affichant le résultat de la variable comme valeur de propriété. Donc, si vous avez le CSS suivant:

:root {
  --color: red;
}


h1 {
  color: var(--color);
}

Le résultat traité sera:

h1 {
  color: red;
  color: var(--color);
}

Les navigateurs qui ne prennent pas en charge les propriétés personnalisées ignorent la deuxième règle et reviennent à la valeur de propriété normale. Il existe également une option pour supprimer les règles avec les propriétés personnalisées dans la sortie, de sorte que la taille du fichier sera plus petite. Cela signifie que non les navigateurs obtiendront la propriété personnalisée – ce qui est un problème si vous mettez à jour les variables de manière dynamique – mais vous pourrez les utiliser pour des valeurs statiques dans votre code sans effets négatifs.

Malheureusement, ce polyfill a quelques limitations:

  1. Vous devez spécifier le fichier (ou les fichiers) dans votre configuration dans lequel vous définissez les propriétés personnalisées.
  2. Les propriétés personnalisées peuvent seulement être défini sur le :root sélecteur.

La première limitation est relativement triviale, mais la seconde rend malheureusement ce polyfill totalement inutile pour notre cas d'utilisation de thème. Cela signifie que nous ne pouvons pas redéfinir les variables sur un sélecteur pour créer nos thèmes.

ie11CustomProperties

Cette option polyfill implique de servir un script côté client, plutôt que de prétraiter le CSS. Nous pouvons ajouter le script suivant à notre tête pour nous assurer que le polyfill ne sera chargé que dans IE 11:

');

Cela nous permet de profiter de tous les avantages des propriétés personnalisées comme dans les exemples ici, c'est donc la solution que j'ai choisie. Il a une limitation où les propriétés personnalisées définies dans style les attributs ne sont pas polyfilled. Mais je l'ai testé pour l'exemple de thème ci-dessus et cela fonctionne très bien.

Mais qu'est-ce que cela a à voir avec Tailwind?

Comme nous l'avons déjà vu, les classes utilitaires – des classes à usage unique qui peuvent être appliquées n'importe où dans notre HTML – peuvent rendre notre code plus réutilisable. C’est le principal argument de vente de Tailwind et d’autres frameworks de classes d’utilitaires – la taille du fichier CSS que vous expédiez devrait donc devenir plus petite. Tailwind propose plusieurs classes de couleurs: .bg-red-medium nous donnerait un rouge background-color valeur de la propriété, .text-red-medium pour color et ainsi de suite pour border, box-shadowou à tout autre endroit auquel vous pensez avoir besoin d'une valeur de couleur.

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

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

Si nous voulons utiliser des valeurs de propriété personnalisées pour nos classes Tailwind, nous pouvons les spécifier dans la configuration:

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

Je préfixe mes couleurs et les noms de cours liés au thème par th- afin qu'il soit évident qu'ils sont spécifiquement liés à la thématisation, mais n'hésitez pas à utiliser la convention qui vous convient.

Désormais, ces classes seront disponibles pour nous via Tailwind. En utilisant .bg-th-primary nous donne l'équivalent de l'écriture:

.some-element {
  background-color: var(--primary);
}

Dans notre CSS, nous pouvons définir nos propriétés personnalisées pour nos thèmes comme auparavant:

:root {
  --primary: #742a2a;
  --secondary: #742a2a;
}


.th-blue {
  --primary: #2a4365;
  --secondary: #3182ce;
}

Appliquons ces classes à notre HTML. Le premier exemple nous donne un composant avec notre thème par défaut (les variables définies sur le: root). Le second a notre thème bleu. La seule différence est l'ajout du .th-blue classe sur le composant. (Encore une fois, j'ai omis les cours sans rapport avec le thème, par souci de concision et de clarté.)


 

Join our mailing list

 
   

Be the first to hear about our new offerings

     
 

Join our mailing list

 
   

Be the first to hear about our new offerings

     

Utilisation de la configuration comme guide de style

Tailwind vous encourage à définir toutes les variables de la configuration, et personnellement je conviens que c'est une meilleure approche. Cela signifie que le fichier de configuration peut être une source unique de vérité plutôt que de se retrouver (potentiellement) à plusieurs endroits pour définir vos couleurs et autres valeurs de thème. Heureusement, nous pouvons également utiliser les valeurs du fichier de configuration Tailwind pour nos propriétés personnalisées. Nous devrons d'abord définir tout de nos couleurs dans la configuration (en supposant que nous n'utilisons pas la palette de couleurs par défaut incluse avec Tailwind):

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

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

:root {
  --th-primary: theme('colors.red.dark');
  --th-secondary: theme('colors.red.medium');
}


.th-blue {
  --th-primary: theme('colors.blue.dark');
  --th-secondary: theme('colors.blue.medium');
}

Emballer

Je suis vraiment enthousiasmé par les avantages de pouvoir utiliser des propriétés personnalisées sans avoir à me soucier de la prise en charge du navigateur, encore plus pour pouvoir les intégrer en douceur à notre flux de travail existant. Il est difficile de surestimer le temps qu’ils vont nous faire gagner pour la thématisation. J'espère que même si vous n'êtes pas un utilisateur de Tailwind, cet article pourrait vous encourager à essayer les propriétés personnalisées pour ce cas d'utilisation.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *