CSS-moduler er en tilgang, der gør det muligt at afgrænse CSS-klassenavne lokalt til specifikke komponenter. Det giver en metode til at skrive CSS-kode modulært og indkapslet, hvilket reducerer risikoen for stilkonflikter og gør vedligeholdelsen af stilarter mere overskuelig. Faktisk er det blevet en af de mest udbredte metoder til organisering af React-projekter.

Fil- og mappeorganisering

Antag, at vi har følgende brugergrænseflade sammensat af tre komponenter: VideoPlayer, AuthorInformation og VideoDescription.

Vi samler ikke alle komponenter og stilarter i én fil. I stedet opretter vi en separat mappe til hver komponent. I hver mappe oprettes en jsx-fil til rendering og logik samt en css-fil til anvendelse af stilarter. Hver css-fil skal have module.css til sidst for at opnå modularitet. Strukturen vil derfor se således ud:

Bemærk

Denne tilgang tilbyder en bekvem løsning til at oprette React-komponenter og skrive stilarter. Det sikrer, at hver komponent er isoleret og kan genbruges effektivt. Lokal afgrænsning af klassenavne forbedrer kodeorganisering, fremmer genanvendelighed og undgår stilkonflikter.

Syntaks

Lad os undersøge syntaksen for brug af modulære stilarter til en komponent ved at bruge VideoDescription-komponenten som eksempel.

Inde i VideoDescription.jsx opretter vi en komponent, der genererer en specifik markup. Der er ikke noget særligt nyt eller ukendt ved det.

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>
);

Forskellen opstår, når vi ønsker at anvende et klassenavn. Først skal vi importere filen VideoDescription.module.css i filen VideoDescription.jsx. Dette kan vi gøre ved hjælp af følgende syntaks:

import <file_name> from "<file_path>";

• <file_name> kan være et vilkårligt ord, vi forbinder med filen. Generelt gives navnet som: css, styles eller blot s;
• <file_path> er den korrekte sti til filen. Vi kender allerede syntaksen: ./.

Resultat:

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

For at tildele et klassenavn til elementet kan vi benytte attributten className. Inden for denne attribut omslutter vi det ønskede klassenavn med krøllede parenteser {}. Inde i parenteserne indsætter vi det specifikke ord, der er forbundet med stilfilen, efterfulgt af et punktum . og klassenavnet. Resultat: className={css.text}. text er det faktiske klassenavn.

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>
);

Nu kan vi åbne filen VideoDescription.module.css og anvende stilarter på p-elementet med klassenavnet text ved hjælp af klasseselektor:

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