Ce que vous devez savoir sur CSS-in-JS en 2021

Dans cet article, nous verrons un aperçu des frameworks CSS-in-JS qui sont les plus demandés par la communauté des développeurs cette année.

Introduction

Il y a quelques années, les frameworks JavaScript basés sur des composants étaient la chose la plus chaude dans la communauté des développeurs Web, en particulier parmi les développeurs frontend. CSS-in-JS est une nouvelle façon de styliser ces composants avec JavaScript à l'intérieur des composants eux-mêmes. Le CSS en lui-même a quelques limitations que nous n'aborderons pas dans cet article, y compris la façon dont il est en cascade dans la nature, le manque de fonctionnalité dynamique et même la portée.

Imaginez que vous écrivez vos styles en JavaScript ou TypeScript à l'intérieur votre composant React, Angular ou Vue. C'est exactement ce que propose CSS-in-JS. Il repose sur l'implémentation du module JavaScript, étant donné que CSS n'a pas de modules, et il garantit qu'une portée suit les règles de style. CSS à lui seul n'a pas de mécanisme de cadrage, donc cette approche résout cela.

«Pendant trois ans, j'ai stylisé mes applications Web sans aucun fichier .css. Au lieu de cela, j'ai écrit tout le CSS en JavaScript. … Je peux ajouter, modifier et supprimer du CSS sans aucune conséquence inattendue. Mes modifications du style d'un composant n'affecteront rien d'autre. Si je supprime un composant, je supprime également son CSS. Fini les feuilles de style ajoutées uniquement! » – Max Stoiber

Il existe quelques frameworks CSS-in-JS disponibles, et nous verrons un aperçu de certains des plus demandés.

Modules CSS

Avec plus de 14 000 étoiles sur GitHub, CSS Modules est l'un des frameworks CSS-in-JS les plus demandés, avec une approche très différente. Les modules CSS vous permettent essentiellement de définir toutes les règles de style que vous écrivez localement par défaut dans le processus de construction. Vous savez comment vous avez un fichier de balisage puis un fichier CSS dans une simple application Web comme celle-ci:

 < h3   class  =  " looks "  >  5ème rubrique va ici  </  h3 > 

et dans le fichier CSS, vous avez quelque chose comme ceci:

 .looks   {
   font-size :   18  px ; [19659024]} 

La taille de la police de cet élément h3 sera toujours 18px et tout ce qui obtient la classe de looks aura toujours cette taille de police.

Avec les modules CSS, vous écrivez le balisage dans un fichier JavaScript à la place, puis le style sera repris lors de la construction et porté exactement là où il est nécessaire – dans notre exemple l'élément h3.

 import  styles  from   "./ styles.css"  ]; 
élément .  innerHTML  = 
   `<h3 class ="  $ { styles .  looks }   " >
    La 5ème rubrique va ici
   ` ; 

Le module analyserait simplement la feuille de style et trouverait où l'apparence était définie, choisirait la valeur et afficherait un fichier HTML et CSS avec des identifiants uniques et des classes comme ceci:

 <  h3   classe  =  " _styles_looks_001 "  > 
  La 5ème rubrique va ici
 </  h3 > 

La feuille de style que le module générera ressemblerait à ceci:

 ._ styles_looks_001   {
   font-size :   18  px ; [19659024]} 

Il a suscité beaucoup d'intérêt et a l'un des taux d'adoption les plus élevés de tous les frameworks CSS-in-JS qui existent actuellement.

Styled-Components

Styled-components qui a été suivi plus de 32 000 fois sur GitHub est une façon d'écrire CSS- in-JS en CSS simple à l'intérieur de vos composants sans avoir à vous soucier si les noms de classe affecteront d'autres éléments ou composants. Les composants stylisés sont limités à un composant et n'affectent aucun autre composant ou élément de votre projet.

Ceci est réalisé en injectant automatiquement des styles aux composants avec le moins de code. Tous les composants stylisés ont leurs propres noms de classe uniques, vous n'aurez donc jamais à vous soucier d'utiliser une classe deux fois. C'est également un excellent moyen de se débarrasser des styles inutilisés: si les styles sont étendus aux composants, lorsqu'un composant est supprimé, le style d'étendue correspondant est également supprimé. Vous pouvez imaginer à quel point il est facile de maintenir une configuration comme celle-ci, tout cela sans nouvelle courbe d'apprentissage.

Pour commencer, installez styled-components en utilisant le gestionnaire de paquets de nœuds comme ceci:

npm install - -save styled-components

Dans package.json, ajoutez ceci:

 {
 "résolutions" :   {
 "styled-components" : [19659028] "^ 5" 
} 
} 

Emotion

Emotion avec plus de 12 000 étoiles sur GitHub est un framework CSS-in-JS indépendant du framework, tout comme les composants stylisés. Avec Emotion, vous pouvez styliser les applications avec des styles d'objets ou des chaînes. Il utilise des cartes sources et des étiquettes, ainsi qu'une excellente documentation que j'aime personnellement. Vous pouvez même tester des utilitaires avec Emotion, et leur composition de style est cool.

Pour commencer avec Emotion, vous pouvez soit utiliser les instructions de configuration de React qui implique simplement une installation avec npm comme ceci:

npm i @ emotion / react

Le package «@ emotion / react» nécessite React et est si possible recommandé aux utilisateurs de ce framework.

Ou, si vous n'utilisez pas React, vous pouvez installez plutôt ce paquet:

npm i @ emotion / css

Emotion n'a pas besoin de configuration supplémentaire, de plugin babel ou d'autres changements de configuration. Il prend également en charge le préfixage automatique du fournisseur, les sélecteurs imbriqués et les requêtes multimédias.

Styled System

With over 6,000 stars on GitHub Styled System est reconnu comme le berceau des propriétés de style pour le développement rapide de l'interface utilisateur qui vous offre un contrôle total des styles de composants via un objet de thème global.

Avec Styled System, vous pouvez créer des composants d'interface utilisateur expressifs et cohérents avec des propriétés de style qui récupèrent les valeurs des thèmes globaux. C'est ce qu'on appelle les valeurs réactives. Il est inspiré des principes du système de conception basé sur les contraintes et prend en charge toutes les palettes de couleurs.

La meilleure chose à propos de Styled System est qu'il fonctionne avec toutes les autres bibliothèques CSS-in-JS, y compris Emotion et styled-components. Pour commencer avec Styled System, vous devez installer une autre bibliothèque CSS-in-JS telle que styled-components ou Emotion .

npm i styled-system styled- composants

Pour créer un composant qui utilise les fonctions Styled System, vous introduisez la fonction de votre choix avec une instruction d'importation. Par exemple, une fonction de couleur peut être utilisée comme ceci:

 import styled from 'styled-components'
importer {color} depuis 'styled-system'
const Box = styled.div`
  $ {color}
»
Exporter la boîte par défaut

Cela signifie que ce composant défini aura à la fois la propriété de style de couleur et la propriété de style de couleur d'arrière-plan.

 < Box   color  =  " #fff  ] "   bg  = "  tomate  " > 
  Tomate
 </  Boîte > 
 

Why State of CSS?

Cette liste de cadres provient des résultats de l'enquête State of CSS, que vous pouvez trouver ici .

Le rapport State of CSS est un rapport complet de comment plus de 11 492 développeurs de 102 pays à travers le monde estiment que CSS a performé au cours des 12 derniers mois. Les données sont obtenues en sondant ces personnes, et les créateurs visualisent ensuite de manière créative les résultats de l'enquête et ajoutent même des animations sympas pour en faire un rapport amusant. L'enquête examine des éléments tels que l'unité et les sélecteurs, les outils, les environnements, les frameworks et tout le reste, y compris les opinions générales qui concernent CSS.

Conclusion

Cet article est un aperçu de quelques frameworks CSS-in-JS qui sont dans demande parmi les développeurs d'interface utilisateur au cours de la dernière année. Nous avons examiné certains d'entre eux, en quoi ils sont différents et les caractéristiques exactes dont ils disposent qui les distinguent. Nous avons également vu comment commencer à utiliser ces outils. Lequel d'entre eux est votre préféré?