Je suis rejoint par Dustin Schau dans cette vidéo et il va m'emmener faire un tour du monde de ce qui est devenu le CSS-in-JS. Autrement dit, faire votre style entièrement en JavaScript, plutôt que dans des .cssfichiers que vous avez dans la tête tout seul.
Dustin est un guide parfait pour cela, car il a créé un excellent outil d'exploration appelé CSS dans JS Playground et a également un tout nouveau cours sur le sujet.
Si vous êtes curieux de savoir pourquoi quelqu'un serait intéressé par la route CSS-in-JS, voici quelques raisons dont nous discutons dans la vidéo:
- Élimination du code mort. Les seuls styles chargés sont les styles des composants utilisés à un moment donné. Il n'y a pas d'expédition de styles inutilisés. Lorsqu'un composant meurt, ses styles aussi.
- Cadrage. L'écriture de nouveaux styles ne peut affecter rien d'autre ailleurs sur le site, il n'est donc pas nécessaire de s'inquiéter d'écrire un style qui a des conséquences mauvaises ou involontaires ailleurs en raison d'un sélecteur dans la portée globale. Nous obtenons une protection de la portée avec des idéologies de dénomination comme BEM, mais ce n'est pas imposé par les outils.
- Nommage sans souci. Dans certains cas, il n'est pas nécessaire de choisir un nom de classe ou un ID pour ce qui est stylé car la sortie contient une interface utilisateur.
- Ergonomie du développeur. Il peut être agréable d'avoir des styles dans le même fichier (ou très proche) du composant lui-même. De la même manière, certains développeurs se sentent très à l'aise dans JSX. Être capable de styliser les choses sans aucun souci de portée signifie que les développeurs peuvent se sentir habilités à styliser plutôt que intimidés par celui-ci.
- Système de conception convivial. Les systèmes de conception sont tous des composants, tout comme React. Ces modes de pensée complémentaires s'harmonisent assez bien les uns avec les autres.
- Possibilités de JavaScript en CSS. Faire cela avec des opérateurs logiques et passer des valeurs et des mathématiques et ainsi de suite, avoir toute la puissance de JavaScript dans les styles est très utile.
Et ce n'est pas tout, mais vous pouvez voir pourquoi c'est convaincant pour certaines personnes. Cela a certainement inspiré beaucoup de discussions. Pourquoi pas quand il offre tous ces avantages? Eh bien, c'est un environnement de développement très différent qui ne clique pas nécessairement avec tout le monde. Cela nécessite de plier la plate-forme Web pour faire des choses quelque peu inhabituelles et cela vient avec des verrues. Sans oublier qu'il y a un coût littéral (taille des paquets et autres) que les utilisateurs paient, que vous feriez mieux d'espérer se rentabiliser avec efficacité.
Dustin est allé jusqu'à construire une démo en utilisant Sass pour styliser les choses et les comparer avec la façon dont cela peut être fait avec CSS-in-JS, ce qui montre à quoi ressemble le portage des styles ainsi que les possibilités de le faire.