Stylisation Avec Les Modules CSS

Les modules CSS sont une approche qui nous permet de limiter les noms de classes CSS à des composants spécifiques localement. Cela offre un moyen d'écrire du code CSS de manière modulaire et encapsulée, réduisant ainsi les risques de conflits de style et rendant les styles plus faciles à maintenir. En fait, c'est devenu l'une des approches les plus largement adoptées pour organiser les projets React.

Organisation des fichiers et dossiers

Supposons que nous ayons l'interface utilisateur suivante composée de trois composants : VideoPlayer, AuthorInformation et VideoDescription.

Nous n'allons pas consolider tous les composants et styles dans un seul fichier. Au lieu de cela, nous établirons un dossier séparé pour chaque composant. Dans chaque dossier, nous créerons un fichier jsx pour le rendu et la logique, et un fichier css pour appliquer les styles. Chaque fichier css doit se terminer par module.css pour atteindre la modularité. Ainsi, la structure apparaîtrait comme suit :

Remarque

Cette approche offre une solution pratique pour créer des composants React et écrire des styles. Elle garantit que chaque composant est isolé et peut être réutilisé efficacement. La portée locale des noms de classes améliore l'organisation du code, favorise la réutilisabilité et évite les conflits de style.

Syntaxe

Explorons la syntaxe de l'utilisation des styles modulaires pour un composant, en utilisant le composant VideoDescription comme exemple.

Dans le VideoDescription.jsx, nous créons un composant qui génère un balisage spécifique. Il n'y a rien de particulièrement nouveau ou inconnu à ce sujet.

La différence apparaît lorsque nous voulons appliquer un nom de classe. Tout d'abord, nous devons importer le fichier VideoDescription.module.css dans le fichier VideoDescription.jsx. Nous pouvons accomplir cela en utilisant la syntaxe suivante :

• <file_name> peut être n'importe quel mot que nous associons au fichier. Généralement, le nom est donné comme : css, styles, ou simplement s;
• <file_path> est le chemin correct vers le fichier. Nous connaissons déjà la syntaxe : ./.

Résultat :

Pour attribuer un nom de classe à l'élément, nous pouvons utiliser l'attribut className. Dans cet attribut, nous incluons le nom de classe souhaité entre accolades {}. À l'intérieur des accolades, nous incluons le mot spécifique associé au fichier de styles, suivi d'un point . et du nom de la classe. Résultat : className={css.text}. text est le vrai nom de la classe.

Maintenant, nous pouvons ouvrir le fichier VideoDescription.module.css et appliquer les styles à l'élément p avec le nom de classe text en utilisant le sélecteur de classe :