Loading content
CSS-Module ermöglichen es Entwicklern, CSS in modularen Einheiten zu organisieren, die lokal und nicht global sind. Dies reduziert Konflikte zwischen Styles und verbessert die Wartbarkeit von Code. Jedes Modul hat seinen eigenen Namensraum, was bedeutet, dass Klassennamen nicht kollidieren, selbst wenn sie in verschiedenen Modulen definiert sind.
Nutze diesen Steckbrief, um den Baustein kurz zu verstehen, ihn im Modell einzuordnen und bei Bedarf in die 360°-Bewertung zu wechseln.
Theoretisches Gebilde: erklärt einen Begriff, ein Prinzip oder ein Denkmodell.
Was Zusammenhänge ordnet, verbindet oder entscheidbar macht.
CSS-Module ordnen Styles in lokal gescopte Einheiten, damit sie komponentenbezogen bleiben und sich nicht global überschneiden.
Der Ansatz entstand aus dem Problem der globalen CSS-Namensräume: In größeren Frontends überschreiben sich Klassen leicht, Regeln werden schwer nachvollziehbar und Entfernen wird riskant. CSS Modules reagieren darauf, indem Styles im Build-Prozess lokal gescoped und beim Import an eine konkrete Komponente gebunden werden. So bleiben Abhängigkeiten sichtbarer und Wiederverwendung planbarer.
Stell dir CSS-Module wie einzeln beschriftete Fächer vor. Eine Komponente importiert ihr Stylesheet; der Build ersetzt die Klassen durch eindeutige, generierte Namen und liefert eine Zuordnung wie `styles.button` → echte CSS-Regel. Dasselbe Kurzlabel kann in mehreren Modulen existieren, weil jedes Fach seinen eigenen Raum hat.
Klassennamen gelten nur in ihrem Modul statt im gesamten Dokument.
Importierte Styles werden als Objekt oder Mapping verfügbar, nicht als frei sichtbare globale Namen.
Mit `composes` lassen sich Stilbausteine aus einem oder mehreren Modulen kombinieren.
Die Lokalisierung der Namen entsteht typischerweise erst durch Compiler oder Bundler.
Styles werden in unabhängige, austauschbare Einheiten zerlegt statt als globale Regelmasse gepflegt.
CSS-Module sind sinnvoll, wenn Teams viele wiederverwendbare UI-Bausteine pflegen oder in gewachsenen Codebasen Selektor-Konflikte vermeiden müssen. Der Ansatz reduziert Kaskaden- und Kollisionsprobleme und macht Abhängigkeiten pro Komponente klarer. Dafür braucht es einen Build-Schritt; für bewusst globales Styling, Utilities oder komponentenübergreifende Vererbung ist ein anderer Ansatz oft passender.
Wo dieser Baustein im Themenmodell verortet ist.
Keine Strukturpfade verfügbar.
Erkunde, wie dieser Wissensbaustein mit Konzepten, Methoden, Technologien und Tools verbunden ist.
Diese Quellen belegen den Begriff und seine fachliche Bedeutung.
Alle direkten Verbindungen des aktuellen Wissensbausteins in einer kompakten, textuellen Darstellung.
Diese Einordnung zeigt, in welchem Kontext der Baustein typischerweise relevant wird, wie anspruchsvoll er ist und welche Wirkung er im Modell hat.
Die Ebene innerhalb der Organisation (Unternehmen, Domäne, Team), auf der der AssetBlock angewendet wird.