L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment redéfinir Unsplash à l'aide de composants stylés –
Écrire du CSS à l'épreuve du temps est difficile. Des noms de classe en conflit, des problèmes de spécificité, etc., apparaissent lorsque vous devez écrire et gérer des milliers de lignes de code CSS. Styled Components a été créé
Styled Components facilite l'écriture de vos CSS dans JS et vous assure qu'il n'y a pas de noms de classe en conflit ni de problèmes de spécificité comportant de nombreux autres avantages. L'écriture de CSS est un plaisir.
Dans ce didacticiel, nous allons explorer ce qu'est CSS dans JS, les avantages et inconvénients de styled-components et enfin, nous allons repenser Unsplash à l'aide de Styled Components. . Après avoir terminé ce didacticiel, vous devriez être en mesure de vous familiariser rapidement avec les composants stylisés.
Remarque: Styled Components a été spécialement conçu pour React. Vous devez donc utiliser React pour utiliser ce dernier. 19659005] Conditions préalables Pour ce didacticiel, vous devez posséder des connaissances de base en React . Tout au long de ce didacticiel, nous utiliserons le fil Pour vous assurer que nous sommes sur la même page, il s'agit des versions utilisées dans ce tutoriel : Avant la création de CSS-in-JS, le moyen le plus courant de styliser des applications Web était de: écrivez CSS dans un fichier séparé et associez-le au HTML. Mais cela a posé problème dans les grandes équipes. Tout le monde a sa propre façon d'écrire CSS. Cela posait des problèmes de spécificité et poussait tout le monde à utiliser Vint ensuite Sass. Sass est une extension de CSS qui nous permet d’utiliser des éléments tels que des variables, des règles imbriquées, des importations en ligne, etc. Cela aide également à garder les choses organisées et nous permet de créer des feuilles de style plus rapidement. Même si Sass peut être perçu comme une amélioration par rapport à CSS, il fait sans doute plus de mal que de bien sans la mise en place de certains systèmes. BEM est arrivé. BEM est une méthodologie qui nous permet de réduire les problèmes de spécificité en nous faisant écrire des noms de classe uniques. BEM résout le problème de spécificité, mais rend le code HTML plus détaillé. Les noms de classe peuvent devenir inutilement longs, et il est difficile de créer des noms de classe uniques lorsque vous avez une énorme application Web. Après cela, les modules CSS sont nés. Les modules CSS ont résolu ce que ni Sass ni BEM ne pouvaient résoudre – le problème des noms de classe uniques – en utilisant des outils plutôt qu'en s'appuyant sur le nom donné par un développeur, ce qui a résolu les problèmes de spécificité. Les modules CSS ont acquis une grande popularité dans l'écosystème React, ouvrant la voie à des projets comme glamour . Le seul problème avec toutes ces nouvelles solutions était que les développeurs étaient amenés à apprendre de nouvelles syntaxes. Et si nous pouvions écrire CSS exactement comment nous l'écrivons dans un fichier Styled Components utilise Template Literals une fonction ES6. Les littéraux de modèle sont des chaînes de caractères permettant des expressions incorporées. Ils permettent d'utiliser des chaînes multilignes et des fonctions d'interpolation de chaînes. Le principal argument de vente de Styled Components est qu'il nous permet d'écrire du code CSS exact dans JS. Styled Components présente de nombreux avantages. Vous trouverez ci-dessous certains des avantages et inconvénients des composants stylés. L'utilisation de composants stylés présente de nombreux avantages. Injecter des CSS critiques dans le DOM Les composants stylés n'injectent que des CSS critiques. page. Cela signifie que les utilisateurs ne téléchargent que les feuilles de style CSS nécessaires pour cette page et rien d'autre. Cela charge la page Web plus rapidement. Plus petit groupe CSS par page Comme il n'injecte que les styles utilisés dans les composants de la page, la taille du groupe est considérablement réduite. Vous ne chargez que le CSS dont vous avez besoin, au lieu de feuilles de style excessives, de normalisateurs, de réactivité, etc. Préfixe automatique du vendeur Styled Components vous permet d'écrire votre CSS et ses préfixes de vendeur automatiquement, conformément au dernier standard. Suppression du code CSS inutilisé Avec les composants stylés, il est plus facile de supprimer le code CSS inutilisé ou inutilisé, car les styles sont colocalisés avec le composant. Cela a également un impact sur la réduction de la taille du paquet. Theming is easy Les composants stylisés facilitent vraiment le thème d'une application React. Vous pouvez même avoir plusieurs thèmes dans vos applications tout en les maintenant facilement. Réduit le nombre de requêtes HTTP En l'absence de fichiers CSS pour les réinitialisations, les normalisateurs et la réactivité, le nombre de requêtes HTTP est considérablement réduit. Noms de classe uniques Styled Components génère des noms de classe uniques chaque fois qu'une étape de construction a lieu. Cela permet d'éviter les collisions de nommage ou les problèmes de spécificité. Plus besoin d'avoir des conflits mondiaux et d'être obligés de les résoudre avec les balises La maintenance est facile Styled Components vous permet de co-localiser des styles avec le composant. Cela permet un entretien sans douleur. Vous savez exactement quel style affecte votre composant, contrairement à un gros fichier CSS. Bien sûr, rien n’est parfait. Examinons quelques inconvénients associés aux composants stylisés. Impossible de mettre en cache les feuilles de style En règle générale, un navigateur Web met en cache les fichiers . . Si vous n'avez pas le fil déjà installé, installez-le à partir de ici . Evolution du CSS
! Important . .css mais en JS? Et c'est ainsi que styled-composant a été créé. Pour
! Important . Contre
.css lorsqu'un utilisateur visite un site Web lors de sa prochaine visite. t devez télécharger le même .css à nouveau. Mais avec styled-components les styles sont chargés dans le DOM à l'aide de la balise