CSS-Module ist ein Ansatz, der es ermöglicht, CSS-Klassennamen lokal auf bestimmte Komponenten zu beschränken. Er bietet eine Möglichkeit, CSS-Code modular und gekapselt zu schreiben, wodurch das Risiko von Stilkonflikten verringert und die Wartbarkeit der Styles erhöht wird. Tatsächlich hat sich dieser Ansatz zu einer der am weitesten verbreiteten Methoden zur Organisation von React-Projekten entwickelt.

Datei- und Ordnerstruktur

Angenommen, wir haben die folgende Benutzeroberfläche, die aus drei Komponenten besteht: VideoPlayer, AuthorInformation und VideoDescription.

Wir werden nicht alle Komponenten und Styles in einer einzigen Datei zusammenfassen. Stattdessen legen wir für jede Komponente einen eigenen Ordner an. In jedem Ordner erstellen wir eine jsx-Datei für das Rendering und die Logik sowie eine css-Datei für die Anwendung der Styles. Jede css-Datei sollte zur Modularisierung mit module.css enden. Die Struktur sieht dann wie folgt aus:

Hinweis

Dieser Ansatz bietet eine praktische Lösung für die Erstellung von React-Komponenten und das Schreiben von Styles. Er stellt sicher, dass jede Komponente isoliert ist und effektiv wiederverwendet werden kann. Das lokale Scoping von Klassennamen verbessert die Codeorganisation, fördert die Wiederverwendbarkeit und verhindert Stilkonflikte.

Syntax

Im Folgenden wird die Syntax für die Verwendung modularer Styles an einem Beispiel der Komponente VideoDescription erläutert.

In der Datei VideoDescription.jsx erstellen wir eine Komponente, die ein bestimmtes Markup generiert. Daran ist nichts besonders neu oder ungewohnt.

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

Der Unterschied entsteht, wenn wir einen Klassennamen anwenden möchten. Zuerst muss die Datei VideoDescription.module.css in die Datei VideoDescription.jsx importiert werden. Dies kann mit folgender Syntax erreicht werden:

import <file_name> from "<file_path>";

• <file_name> kann ein beliebiges Wort sein, das wir mit der Datei verknüpfen. Üblicherweise werden Namen wie css, styles oder einfach s verwendet;
• <file_path> ist der korrekte Pfad zur Datei. Die Syntax ist bereits bekannt: ./.

Ergebnis:

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

Um einem Element einen Klassennamen zuzuweisen, kann das Attribut className verwendet werden. Innerhalb dieses Attributs wird der gewünschte Klassenname in geschweifte Klammern {} gesetzt. In den Klammern steht das spezifische Wort, das mit der Styles-Datei verknüpft ist, gefolgt von einem Punkt . und dem Klassennamen. Ergebnis: className={css.text}. text ist der tatsächliche Klassenname.

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

Nun kann die Datei VideoDescription.module.css geöffnet werden, um die Stile auf das p-Element mit dem Klassennamen text mittels Klassenselektor anzuwenden:

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