CSS dans JS : guide complet des composants stylisés, des émotions et plus encore pour un style plus propre et évolutif.

Si vous avez déjà jonglé avec des fichiers CSS complexes et tentaculaires ou eu du mal à garder les styles organisés dans de grands projets, alors vous allez adorer CSS dans JS. En effet, avec cette approche, vous pouvez écrire du CSS directement dans votre JavaScript, ce qui rend les styles modulaires et flexibles, les rendant parfaitement adaptés aux frameworks basés sur des composants comme React.

Nous allons plonger dans deux des bibliothèques CSS-in-JS les plus populaires, Styled-Components et Emotion, et vous donner quelques conseils pratiques sur la façon de les utiliser efficacement.

Voyons comment cet outil peut changer votre style sans sacrifier un code propre, maintenable et évolutif.

Pourquoi CSS-in-JS ?
L’une des raisons pour lesquelles CSS dans JS devient populaire est qu’il résout l’un des plus grands défis du développement Web moderne, en particulier pour les équipes qui créent de grandes applications. En déplaçant les styles dans JavaScript, nous obtenons ce qui suit :

Styles étendus : plus de collisions de noms de classe. Styles étendus à chaque composant.

Style dynamique : avec la logique JavaScript, modifiez les styles concernant les accessoires, le thème ou l'état de l'application.

Développement basé sur les composants : les bibliothèques CSS-in-JS s'accompagnent naturellement de frameworks basés sur des composants tels que React, Vue et Angular. Cela garde vos styles encapsulés et modulaires.

Composants stylisés : les bases
Styled-Components est probablement l'une des bibliothèques les plus populaires de l'écosystème CSS-in-JS, qui se vante de sa simplicité et est facile à utiliser avec React.

Démarrage rapide
Installer les composants stylés :
$ npm installer des composants stylés
Importez-le ensuite dans votre composant :
$ import stylisé à partir de 'composants stylisés' ;

Composant stylisé :

const Button = styled.button`
couleur d'arrière-plan : #6200ea ;
couleur : blanc ;
rembourrage : 10px 20px ;
rayon de bordure : 5 px ;
bordure : aucune ;
curseur : pointeur ;

&:survoler {
couleur d'arrière-plan : #3700b3;
>
Utilisez le composant stylisé dans votre JSX :

Cliquez sur moi

Caractéristiques principales :
Thémisation : avec Styled-Components, vous pouvez créer des thèmes pour un style cohérent dans toute votre application.

Style dynamique : on pourrait vouloir changer la façon dont les choses sont stylisées de manière dynamique. Cela irait de pair avec des accessoires et créerait des composants très flexibles et réutilisables.

Émotion : Souplesse et Performance
Emotion est une autre bibliothèque CSS-in-JS puissante, connue pour sa flexibilité et ses performances. Il propose deux méthodes principales de style : pour les styles en ligne, le prop css, et styled, pour les composants réutilisables.

Démarrage rapide
Installer Emotion :

npm install @emotion/react @emotion/styled
Importer et utiliser :

importer le style depuis '@emotion/styled';

const Card = styled.div`
remplissage : 20 px ;
box-shadow : 0 4px 8px rgba(0, 0, 0, 0.2);
rayon de bordure : 8 px ;
couleur de fond : blanc ;

Pour les styles en ligne dynamiques :

importer { css } depuis '@emotion/react';

const DynamicStyle = css`
couleur : bleu ;
taille de police : 16 px ;

Bonjour, Émotion !

Caractéristiques principales :
Styles en ligne et réutilisables : plus de contrôle, plus de flexibilité avec les méthodes de style grâce aux API CSS et de style d'Emotion.

Rendu côté serveur : Emotion est hautement optimisé pour SSR et trouve donc un cas d'utilisation parfait dans les applications nécessitant d'excellentes performances en matière de référencement.

Bonnes pratiques pour CSS-in-JS
Il existe quelques bonnes pratiques pour utiliser efficacement CSS-in-JS, qui aident à maintenir les performances et à garder vos styles propres :

Évitez trop de styles dynamiques en ligne : les styles en ligne sont parfaits pour des ajustements mineurs ponctuels. Cependant, un trop grand nombre créera des goulots d’étranglement dans les performances. Au lieu de cela, appliquez des composants stylisés pour les styles réutilisables et limitez le style en ligne lorsque cela est vraiment nécessaire.

Tirez parti des thèmes : utilisez les thèmes pour appliquer une structure et une apparence cohérentes dans votre application. Des bibliothèques comme Styled-Components et Emotion permettent de définir un thème global. Cela facilitera grandement l'application des couleurs de marque, des polices et d'autres critères de style sur vos composants.

importer { ThemeProvider } à partir de 'composants stylisés' ;

const thème = {
couleur primaire : '#6200ea',
Taille de la police : '16px',
};

Styles basés sur les accessoires : les accessoires dynamiques vous permettent de modifier les styles en fonction de l'état des composants ou même des données entrantes. Dans Styled-Components et Emotion, les accessoires offrent un moyen simple pour vos composants de répondre aux besoins de différents scénarios d'utilisation sans réécrire les styles.

const Button = styled.button`
couleur d'arrière-plan : ${(props) => (props.primary ? '#6200ea' : '#eee')};
couleur : ${(accessoires) => (props.primary ? 'blanc' : 'noir')};

Bouton principal
Bouton secondaire

Partage de code : sachez que les bibliothèques CSS-in-JS peuvent donner lieu à des bundles plus volumineux si vous ne faites pas attention. Utilisez des techniques telles que le fractionnement de code et chargez uniquement les styles nécessaires à chaque partie de votre application pour obtenir des performances décentes.

Composants stylisés vs émotion
Lequel utiliser ? Les deux sont des bibliothèques étonnantes, et chacune répond à un besoin différent. Une comparaison rapide :

composants stylisés : idéal pour les applications React lorsque la thématisation et la facilité d'utilisation sont requises. Il est très adopté et possède une très bonne documentation, ce qui le rend convivial pour les débutants.

Émotion : Plus flexible et optimisée pour les performances. Emotion conviendra mieux si vous avez besoin du support SSR ou si vous recherchez une bibliothèque qui vous offrirait des options de style en ligne et réutilisables.

CSS-in-JS représente un moyen puissant de créer un style Web moderne, surtout si vous êtes un développeur doté d'un framework axé sur les composants. Avec des bibliothèques telles que Styled-Components et Emotion, vous pouvez conserver des styles modulaires, dynamiques et cohérents dans toute votre application.

En restant proche des meilleures pratiques en matière de styles en ligne, d'utilisation de thèmes et de styles basés sur les accessoires, vous pouvez tirer le meilleur parti de CSS-in-JS pour nettoyer et faire évoluer votre code.

Prêt à changer votre façon de travailler en CSS ? Eh bien, essayez CSS-in-JS par vous-même !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!