Comprendre CSS-in-JS

Nous allons découvrir CSS-in-JS, les pouvoirs de cette technique et comment créer de meilleures applications en écrivant notre code CSS avec JavaScript.

Dans cet article, nous allons en savoir plus sur CSS-in-JS, une manière différente de styliser nos éléments dans les applications. Cette technique est utilisée depuis longtemps dans la communauté, et de nombreux développeurs trouvent qu'ils ont un meilleur style de composition dans leurs applications et rendent leurs éléments CSS et leur code plus propres, plus beaux et plus faciles à gérer.

Dans cet article, la plupart des exemples seront liés aux applications React, mais CSS-in-JS n'est pas une chose spécifique à React – c'est une technique pour styliser les applications et peut être appliquée dans n'importe quel autre framework ou bibliothèque. Pour comprendre CSS-in-JS, nous allons d'abord en apprendre un peu plus sur CSS en général dans React et sur la façon dont nous dénommions nos applications avant l'essor de CSS-in-JS. Ensuite, nous allons en apprendre davantage sur les modules CSS, une autre technique de style des applications React qui ont été largement utilisées pendant un certain temps par de nombreux développeurs. Après cela, nous allons couvrir CSS-in-JS, pourquoi il a été tellement utilisé récemment par les développeurs, ses avantages, etc.

CSS, en général, a toujours été un sujet populaire et important sur le Web, et La façon dont nous modélisons nos applications a toujours été un sujet de discussion et d'étude pour de nombreux développeurs, nécessitant une étude pour comprendre ce qui serait le bon choix pour une situation ou une application spécifique. Au début, nous avions un moyen simple et facile de styliser nos applications, un moyen bien connu de presque tous les développeurs: créer un simple fichier .css et, à l'intérieur de ce fichier, vous pouvez organiser, modifier et styliser tout élément de votre application que vous souhaitez. Mais une fois que vous avez un fichier .css et que vous commencez à styliser vos éléments, votre application et principalement votre code CSS vont augmenter en taille, vous devrez donc commencer à réfléchir à d'autres façons d'organiser votre Code CSS et rendre votre application plus simple, plus facile à maintenir, contenir du code plus propre, etc.

La technique de CSS-in-JS est essentiellement venue pour résoudre ce problème particulier afin que vous n'ayez pas une tonne de . fichiers css et vous n'aurez pas à gérer votre code CSS comme nous le faisions auparavant, dans certaines situations devant appliquer des techniques telles que BEM OOCSS etc. pour obtenir un meilleur code et améliorer votre application.

Apprenons quelques façons de styliser nos applications React – certaines méthodes que nous utilisions avant la montée en puissance de CSS-in-JS, puis nous allons passer en revue l'introduction de CSS-in-JS. Enfin, nous allons en apprendre un peu sur certaines bibliothèques que nous pouvons commencer à utiliser aujourd'hui pour avoir un meilleur style de composition dans nos applications.

CSS dans React

Dans React, avant l'essor de CSS-in JS, le moyen le plus utilisé pour travailler avec CSS était d'utiliser des modules CSS. Mais que sont exactement les modules CSS?

Un module CSS est essentiellement un fichier .css où vous mettrez tout votre code CSS, comme les noms de classe, les identifiants, les animations, etc. et, à chaque fois il est importé, les noms et les animations à l'intérieur de ce module CSS spécifique sont étendus localement au composant par défaut. L'idée principale des modules CSS est que chaque composant possède son propre fichier .css et est un processus qui se produit au moment de la construction qui modifiera les noms de classe et les sélecteurs que vous devez délimiter.

Imaginons que nous ayons un simple .css fichier appelé menu.css ., À l'intérieur de ce fichier, nous avons du code CSS, comme ceci:

     .menu {
      largeur: 200 px;
      hauteur: 600px;
      affichage: flex;
      flex-direction: colonne;
      align-items: centre;
      justifier-contenu: centre;
    }

    .article {
      taille de police: 16px;
      poids de police: 600;
    }

Ensuite, pour l'utiliser, nous allons importer ce module dans notre composant, comme ceci:

 importer des styles depuis "./menu.css"

Par exemple, imaginons que nous avons un élément ul simple avec trois éléments li à l'intérieur, comme ceci:

    

      
 CSS 
      
 CSS-in-JS [19659017] Modules CSS 
    

Pour utiliser les classes que nous avons définies dans notre module, il nous suffit de passer le nom de classe de chaque élément à l'intérieur d'un objet, comme ceci:

    

      
 CSS 
      
 CSS-in-JS 
      
 CSS Modules 
    

Maintenant, lorsque l'application démarre, les noms de classe seront transformés en nouveaux noms de classe, pour éviter les conflits globaux entre les styles. Nous avons couvert un peu les modules CSS, juste pour comprendre comment cela fonctionne. Nous pouvons maintenant plonger profondément et en savoir plus sur CSS-in-JS et ses avantages.

CSS-in-JS

Vous le savez peut-être déjà, mais il y a une légère différence entre CSS-in-JS et les styles en ligne. Avec les styles en ligne, vous écrivez votre code dans un objet JavaScript, puis vous l'attachez à l'attribut style . En utilisant des styles en ligne, vous avez certaines limitations – vous ne pouvez pas utiliser de pseudo-sélecteurs, de requêtes multimédias, d'images clés, etc.

CSS-in-JS est différent des styles en ligne. Nous écrivons toujours tous nos CSS en JavaScript, mais au lieu de les passer à l'attribut style, nous prenons ces styles et injectons une chaîne réelle de CSS dans une balise