Les modules CSS constituent une approche permettant de limiter localement la portée des noms de classes CSS à des composants spécifiques. Cette méthode offre une manière d'écrire du code CSS de façon modulaire et encapsulée, réduisant ainsi les risques de conflits de styles et facilitant la maintenance des styles. En réalité, il s'agit de l'une des approches les plus largement adoptées pour organiser les projets React.

Organisation des fichiers et dossiers

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

Nous n'allons pas regrouper tous les composants et styles dans un seul fichier. À la place, nous allons créer un dossier séparé pour chaque composant. Dans chaque dossier, nous créerons un fichier jsx pour le rendu et la logique, ainsi qu'un fichier css pour l'application des styles. Chaque fichier css doit se terminer par module.css afin d'assurer la modularité. Ainsi, la structure apparaîtra comme suit :

Remarque

Cette approche constitue une solution pratique pour créer des composants React et rédiger 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 styles.

Syntaxe

Examinons la syntaxe d’utilisation des styles modulaires pour un composant, en prenant l’exemple du composant VideoDescription.

À l’intérieur de VideoDescription.jsx, un composant est créé pour générer un balisage spécifique. Aucun élément particulièrement nouveau ou inhabituel n’est présent.

const VideoDescription = () => (
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

La différence apparaît lorsque l’on souhaite appliquer un nom de classe. Tout d’abord, il faut importer le fichier VideoDescription.module.css dans le fichier VideoDescription.jsx. Cela s’effectue à l’aide de la syntaxe suivante :

import <file_name> from "<file_path>";

• <file_name> peut être n’importe quel mot associé au fichier. Généralement, on utilise : css, styles ou simplement s ;
• <file_path> correspond au chemin d’accès correct au fichier. Nous connaissons déjà la syntaxe : ./.

Résultat :

import css from "./VideoDescription.module.css";

Pour attribuer un nom de classe à l’élément, il est possible d’utiliser l’attribut className. À l’intérieur de cet attribut, le nom de la classe souhaitée est placé entre accolades {}. À l’intérieur des accolades, il faut indiquer le mot associé au fichier de styles, suivi d’un point . et du nom de la classe. Résultat : className={css.text}. text est le nom réel de la classe.

import css from "./VideoDescription.module.css";

const VideoDescription = () => (
  <p className={css.text}>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Il est désormais possible d’ouvrir le fichier VideoDescription.module.css et d’appliquer les styles à l’élément p avec le nom de classe text en utilisant le sélecteur de classe :

.text {
  background-color: lightgreen;
  color: darkblue;
  font-size: 24px;
}