CSS-modules is een benadering waarmee CSS-classnamen lokaal aan specifieke componenten kunnen worden gekoppeld. Het biedt een manier om CSS-code modulair en ingekapseld te schrijven, waardoor de kans op stijlconflicten wordt verminderd en de onderhoudbaarheid van stijlen wordt vergroot. Het is zelfs een van de meest gebruikte methoden geworden voor het organiseren van React-projecten.

Bestands- en mappenstructuur

Stel dat we de volgende gebruikersinterface hebben, bestaande uit drie componenten: VideoPlayer, AuthorInformation en VideoDescription.

We zullen niet alle componenten en stijlen in één bestand samenvoegen. In plaats daarvan maken we voor elke component een aparte map aan. In elke map maken we een jsx-bestand voor de weergave en logica, en een css-bestand voor het toepassen van stijlen. Elk css-bestand moet eindigen op module.css om modulariteit te bereiken. De structuur ziet er dan als volgt uit:

Opmerking

Deze benadering biedt een handige oplossing voor het creëren van React-componenten en het schrijven van stijlen. Het zorgt ervoor dat elke component geïsoleerd is en effectief hergebruikt kan worden. Lokaal gescope classnamen verbeteren de codeorganisatie, bevorderen herbruikbaarheid en voorkomen stijlconflicten.

Syntaxis

Laten we de syntaxis van het gebruik van modulaire stijlen voor een component verkennen, met het VideoDescription-component als voorbeeld.

Binnen VideoDescription.jsx maken we een component die een specifieke markup genereert. Hier is niets bijzonder nieuws of onbekends aan.

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

Het verschil ontstaat wanneer we een classnaam willen toepassen. Eerst moeten we het bestand VideoDescription.module.css importeren in het bestand VideoDescription.jsx. Dit kan met de volgende syntax:

import <file_name> from "<file_path>";

• <file_name> kan elk woord zijn dat we aan het bestand koppelen. Meestal wordt de naam gegeven als: css, styles of simpelweg s;
• <file_path> is het juiste pad naar het bestand. We kennen de syntax al: ./.

Resultaat:

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

Om een classnaam toe te wijzen aan het element, gebruiken we het attribuut className. Binnen dit attribuut plaatsen we de gewenste classnaam tussen accolades {}. Binnen de accolades vermelden we het specifieke woord dat aan het stijlenbestand is gekoppeld, gevolgd door een punt . en de classnaam. Resultaat: className={css.text}. text is de daadwerkelijke classnaam.

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 kunnen we het bestand VideoDescription.module.css openen en de stijlen toepassen op het p-element met de classnaam text via de class selector:

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