Eine kleine Geschichte über CSS-Module (und warum sie dir das Leben erleichtern)

Hinweis: Dieser Artikel wurde unter Zuhilfenahme von KI aus dem Englischen übersetzt. Hier geht's zum Originaltext.

Als ich anfing, mich mit Webdesign zu beschäftigen, begann ich mit HTML zu arbeiten und nutzte die einfachsten CSS-Eigenschaften, wie zum Beispiel das Ändern von Farben und das Festlegen von Positionen ohne jegliche Struktur dahinter. Das führte dazu, dass meine Stylesheets verwirrend wurden und manchmal miteinander in Konflikt gerieten, vielleicht auch, weil ich wild mit !important-Regeln um mich warf.

Deshalb verbrachte ich viele Stunden damit, meine Float-Container zu bereinigen und Designprobleme mit Behelfslösungen oder verschachtelten Containern zu beheben. Vielleicht wusste ich es damals nicht besser. Aber ehrlich gesagt nahm ich CSS nicht besonders ernst und es fühlte sich an wie der kleine ungeliebte Bruder von HTML, dessen einzige Aufgabe darin bestand, hübsche Schriftarten und Farben bereitzustellen und jeden einzelnen Container an seine festgelegte Position zu zwingen, ohne Rücksicht auf andere Elemente. Nicht mehr, nicht weniger. Irgendwann entdeckte ich die Möglichkeit, kleine, aber (bezogen auf mein damaliges Wissen) beeindruckende Animationen mit der transition-Eigenschaft zu erstellen. Ich begann umzudenken: Vielleicht gab es doch eine strahlendere Zukunft für CSS? Und über die Jahre wurde ich glücklicherweise bestätigt.

Heute gibt es zahlreiche Code-Konventionen, Styleguides und Tools wie BEM, SMACSS oder OOCSS. Aber eines hat mich besonders gepackt: CSS Modules. Kurz zusammengefasst: Statt reines HTML zu schreiben, erstellen wir unseren gesamten Markup in JavaScript, importieren CSS-Dateien und verwenden deren Eigenschaften. Das Schlüsselwort hier ist lokal begrenzt, sodass Klassennamen ähnlich wie lokale Variablen in JavaScript funktionieren. Das CSS-Modul selbst ist nur eine normale .css-Datei mit lokalen Klassennamen, die durch einen Compiler läuft und auf der anderen Seite als modifizierte Version der Eingabe-CSS mit umbenannten Klassennamen herauskommt. Der neue CSS-Name ist eine Kombination aus dem Namen der Datei, aus der er stammt, dem lokalen Klassennamen und einem zufälligen Hash, z.B. person_name_jx3k. Der css-loader von webpack ist beispielsweise einer dieser CSS-Modules-Compiler. Aber es gibt noch mehr: CSS Modules hat tatsächlich eine weitere versteckte Ausgabe, ein JavaScript-Modul, das ein Objekt exportiert, welches all deine ursprünglichen Klassennamen den umbenannten zuordnet.

Schau dir dieses Beispiel an:

Der Schlüssel name entspricht dem ursprünglichen Klassennamen und gibt die umbenannte Klasse zurück. Wie du siehst, ermöglichen CSS Modules es, eine neue Komponente zu erstellen, ohne dass globale Stile die bestehende Arbeit beeinträchtigen. Hier ist ein Beispiel, wie das in der Praxis funktionieren könnte:

Die gerenderte HTML-Ausgabe wäre:

Die Vorteile von CSS Modules liegen also auf der Hand:

• CSS wird modular und wiederverwendbar.
• Es vermeidet Kollisionen von Klassennamen. Keine Verschmutzung des globalen Scopes mehr.
• JavaScript muss CSS-Abhängigkeiten explizit angeben. Man weiß genau, welche Klassennamen wo verwendet werden.

Jessica absolvierte 2019 eine Ausbildung bei Peerigon, um professionelle Webentwicklerin zu werden. Als Teil ihrer wöchentlichen Routine veröffentlicht sie jede Woche einen Blogbeitrag darüber, was sie getan hat und was sie gelernt hat.