Verwenden von CSS-Modulen in React

Ein Fall für CSS-Module und wie Sie sie in Ihre React App implementieren können

Wenn Sie mit CSS noch relativ neu sind, ist möglicherweise das erhebliche Problem aufgetreten, das beim Erweitern des Anwendungsstils auftritt. Da CSS-Regeln dem globalen Geltungsbereich folgen , kollidieren zwei oder mehr Klassen mit demselben Namen. Der Umgang mit mehreren Stylesheets und das Verfolgen von Namenskonventionen in CSS-Dateien kann lästig werden. Wenn Sie nicht vorsichtig genug sind, können Konflikte mit identischen Klassennamen auftreten.

CSS-Module können diese Fehler beheben, die wahrscheinlich auftreten, insbesondere wenn Ihre Anwendung wächst. Sie ermöglichen es uns letztendlich, denselben Klassennamen in mehreren Dateien ohne Selektor- und Regelfehler zu verwenden, indem wir Klassennamen standardmäßig lokal festlegen.

Ein CSS-Modul ist einfach eine .cssDatei, in der Klassen ähnlich wie lokale Variablen in Javascript funktionieren. Es ist ein Tool, das jede Klasse einzigartig macht, indem es einen Hash in ihren Namen einfügt.

Erstellen eines CSS-Moduls

Wenn Sie verwenden create-react-app, ist das Erstellen eines CSS-Moduls für eine Komponente relativ einfach. Folgen Sie der typische Namenskonvention für eine CSS - Datei, aber einfügen modulevor .css, etwa so:[name].module.css

Um ein Beispiel zu sehen, hier ist meine Task.module.cssDatei in einer einfach zu erledigenden App:

Wenn ich eine andere boxKlasse in einer anderen Komponente habe, die eine andere Farbe hat, kollidieren diese Regeln nicht , da Module den lokalen Bereich anwenden .

Um ein CSS-Modul in die entsprechende Komponente zu importieren, importieren Sie das Stylesheet des CSS-Moduls als stylesoder [name]Styles:

Verwenden Sie in JSX die definierte CSS-Klasse wie folgt als className-Requisite:

Von hier aus können Sie beliebig viele andere CSS-Module hinzufügen. Denken Sie jedoch daran, jedes Modul unter einem anderen Namen zu importieren.

Mit CSS-Modulen können Sie tragbare, wiederverwendbare CSS-Dateien erstellen und müssen sich nicht mehr mit Kollisionen von Selektornamen oder Regeln befassen, die sich auf die Stile einer anderen Komponente auswirken.

Bei der Entscheidung für das Styling von React-Apps sind Entwickler häufig hin- und hergerissen zwischen der Verwendung von CSS-Modulen oder einer CSS-in-JS- Bibliothek ( Tool zum Abstrahieren des CSS auf Komponentenebene ) wie Styled-Components, Emotion oder Styled-Jsx. Da CSS-in-JS-Bibliotheken immer häufiger und allgemeiner für die deklarative Beschreibung von Stilen verwendet werden, habe ich festgestellt, dass viele immer noch der Meinung sind, dass CSS-Module der richtige Weg sind, insbesondere aufgrund ihrer modularen und wiederverwendbaren Eigenschaften, die das Styling-Erlebnis noch bereichern nahtlos.