CSS-Module ist ein Ansatz, der es ermöglicht, CSS-Klassennamen lokal auf bestimmte Komponenten zu beschränken. Dadurch kann CSS-Code modular und gekapselt geschrieben werden, was die Wahrscheinlichkeit von Stilkonflikten verringert und die Wartbarkeit der Styles erhöht. Tatsächlich hat sich dieser Ansatz als einer der am weitesten verbreiteten Methoden zur Organisation von React-Projekten etabliert.

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 richten wir für jede Komponente einen eigenen Ordner ein. 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 mit module.css enden, um Modularität zu gewährleisten. Die Struktur sieht daher wie folgt aus:

Hinweis

Dieser Ansatz bietet eine komfortable Lösung zur Erstellung von React-Komponenten und zum 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

Untersuchen wir die Syntax für die Verwendung modularer Styles an einem Beispiel mit der Komponente VideoDescription.

In der Datei VideoDescription.jsx wird eine Komponente erstellt, die ein bestimmtes Markup generiert. Es gibt hierbei nichts besonders Neues oder Unbekanntes.

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 eine Klassenname zugewiesen werden soll. 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 mit der Datei assoziiert wird. Ü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. Innerhalb der Klammern steht das spezifische Wort, das mit der Styles-Datei assoziiert 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>
);

Jetzt kann die Datei VideoDescription.module.css geöffnet werden, um die Stile auf das p-Element mit dem Klassennamen text mithilfe des Klassenselektors anzuwenden:

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