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 lettere. 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 enkelt fil. I stedet opretter vi en separat mappe for hver komponent. Inden for hver mappe opretter vi en jsx-fil til rendering og logik samt en css-fil til anvendelse af stilarter. Hver css-fil skal have module.css som endelse for at opnå modularitet. Strukturen vil derfor se således ud:

Bemærk

Denne tilgang giver en praktisk løsning til at oprette React-komponenter og skrive stilarter. Det sikrer, at hver komponent er isoleret og kan genbruges effektivt. Lokalt scope-de klassnavne 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 dette.

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 tilføje et klassenavn. Først skal vi importere filen VideoDescription.module.css i VideoDescription.jsx-filen. Dette kan vi gøre med 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 stilarterne på p-elementet med klassenavnet text ved hjælp af klassevælgeren:

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