CSS-moduler er en tilnærming som lar oss avgrense CSS-klassenavn til bestemte komponenter lokalt. Dette gir en måte å skrive CSS-kode modulært og innkapslet på, noe som reduserer risikoen for stilkonflikter og gjør stilene mer vedlikeholdbare. Faktisk har dette blitt en av de mest utbredte metodene for å organisere React-prosjekter.

Fil- og mappeorganisering

Anta at vi har følgende brukergrensesnitt sammensatt av tre komponenter: VideoPlayer, AuthorInformation og VideoDescription.

Vi samler ikke alle komponenter og stiler i én enkelt fil. I stedet oppretter vi en egen mappe for hver komponent. I hver mappe lager vi en jsx-fil for rendering og logikk, samt en css-fil for å legge til stiler. Hver css-fil skal ha module.css på slutten for å oppnå modularitet. Strukturen vil da se slik ut:

Merk

Denne tilnærmingen gir en praktisk løsning for å lage React-komponenter og skrive stiler. Det sikrer at hver komponent er isolert og kan gjenbrukes effektivt. Lokalt avgrensede klassenavn forbedrer kodeorganisering, fremmer gjenbrukbarhet og forhindrer stilkonflikter.

Syntaks

Vi skal se nærmere på syntaksen for å bruke modulære stiler i en komponent, med VideoDescription-komponenten som eksempel.

Inne i VideoDescription.jsx lager vi en komponent som genererer en spesifikk markup. Det er ingenting spesielt nytt eller ukjent med 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>
);

Forskjellen oppstår når vi ønsker å tildele et klassenavn. Først må vi importere VideoDescription.module.css-filen inn i VideoDescription.jsx-filen. Dette kan vi gjøre med følgende syntaks:

import <file_name> from "<file_path>";

• <file_name> kan være et hvilket som helst ord vi assosierer med filen. Vanligvis brukes navn som: css, styles eller bare s;
• <file_path> er den korrekte banen til filen. Vi kjenner allerede syntaksen: ./.

Resultat:

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

For å tildele et klassenavn til elementet, kan vi bruke attributtet className. Inne i dette attributtet omslutter vi ønsket klassenavn med krøllparenteser {}. Inne i parentesene inkluderer vi det spesifikke ordet som er assosiert med stilfilen, etterfulgt av et punktum . og klassenavnet. Resultat: className={css.text}. text er det faktiske klassenavnet.

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

Nå kan vi åpne VideoDescription.module.css-filen og bruke stilene på p-elementet med klassenavnet text ved å bruke klasseselektor:

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