CSS Modules: bereichsbezogene Klassennamen
Aktivieren Sie CSS Modules in einem Vite- oder webpack-Projekt, um Klassennamen automatisch auf die Komponentendatei zu begrenzen und globale Style-Leaks zu vermeiden.
CSS Modules: bereichsbezogene Klassennamen ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind CSS Modules?
CSS Modules verändern Klassennamen während des Build-Prozesses und fügen ihnen einen eindeutigen Hash hinzu, sodass sie auf die Komponentendatei begrenzt sind. Eine Klasse namens .card wird zu .card_a1b2c3 – eine versehentliche Kollision mit den Styles anderer Komponenten ist dadurch unmöglich.
So funktionieren CSS Modules
Importieren Sie die CSS-Datei als Objekt. Verwenden Sie die Eigenschaften dieses Objekts als Klassennamen. Bundler wie Vite und webpack übernehmen die Umwandlung.
// Button.module.css
.button {
background: #6366f1;
color: white;
padding: 8px 16px;
}
.button--large {
padding: 12px 24px;
}
// Button.tsx
import styles from './Button.module.css';
function Button({ large }: { large?: boolean }) {
return (
<button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
Click me
</button>
);
}Dynamische Klassennamen mit clsx
Die Bibliothek clsx vereinfacht das bedingte Zusammenstellen von Klassennamen mit CSS Modules.
import clsx from 'clsx';
import styles from './Button.module.css';
function Button({ variant, disabled }: ButtonProps) {
return (
<button className={clsx(
styles.button,
styles[`button--${variant}`],
disabled && styles['button--disabled']
)}>
...
</button>
);
}Globales CSS in CSS Modules
Verwenden Sie :global, um Klassen zu deklarieren, die NICHT auf einen Bereich begrenzt werden sollen. Das ist nützlich, um Klassen von Drittanbieterbibliotheken zu überschreiben.
/* Scoped: */
.container { padding: 16px; }
/* Global (not scoped): */
:global(.react-datepicker) {
font-family: inherit;
}Komposition – Klassen erweitern
CSS Modules unterstützen composes, um Styles von einer anderen Klasse zu übernehmen, auch aus anderen Modulen.
/* utilities.module.css */
.flexRow {
display: flex;
align-items: center;
gap: 8px;
}
/* Button.module.css */
.button {
composes: flexRow from './utilities.module.css';
background: #6366f1;
}CSS Modules vs. Scoped Styles (Vue)
Die bereichsgebundenen Styles von Vue und CSS Modules verhindern beide das ungewollte Auslaufen von Styles in den globalen Bereich, funktionieren aber unterschiedlich: Scoped Styles fügen Datenattribute hinzu, CSS Modules verändern Klassennamen. Beide Ansätze sind sinnvoll – CSS Modules funktionieren auch mit React.
CSS Modules in Vite
Vite unterstützt CSS Modules ohne zusätzliche Konfiguration für Dateien, die auf .module.css enden.
TypeScript für CSS Modules
Installieren Sie typescript-plugin-css-modules oder erzeugen Sie mit dem Tool typed-css-modules .d.ts-Dateien für CSS Modules, um die automatische Vervollständigung von Klassennamen zu erhalten.
Namenskonventionen in CSS Modules
Da Klassennamen zu JavaScript-Eigenschaften werden, sollten Sie in CSS Modules camelCase für Klassennamen verwenden: .buttonPrimary statt .button-primary (der Bindestrich erfordert den Zugriff in Klammernotation).
Wann Sie CSS Modules verwenden sollten
CSS Modules eignen sich hervorragend für React-Anwendungen, in denen komponentenbezogene Styles erforderlich sind, eine vollständige CSS-in-JS-Lösung aber überdimensioniert wäre. Vite plus CSS Modules ist eine schlanke Styling-Lösung ohne Laufzeitaufwand.
CSS Modules vs. CSS-in-JS
CSS Modules: kein Laufzeitaufwand, reines CSS, bessere Performance. CSS-in-JS (styled-components): dynamische Styles zur Laufzeit, JavaScript-zentriert. Für die meisten Anwendungen sind CSS Modules einfacher und schneller.
Kurzer Test
Was geschieht mit einem CSS-Klassennamen, wenn Sie CSS Modules verwenden?
Zusammenfassung: CSS Modules
Importieren Sie .module.css-Dateien als Objekte. Klassennamen werden automatisch mit einem eindeutigen Hash auf einen Bereich begrenzt. Verwenden Sie :global() für bewusst globale Styles. composes dient zur Vererbung zwischen Modulen. clsx dient zum bedingten Zusammenstellen von Klassennamen. Vite unterstützt CSS Modules nativ. Kein Laufzeitaufwand im Gegensatz zu CSS-in-JS.
Häufig gestellte Fragen
Ist die Lektion „CSS Modules: bereichsbezogene Klassennamen“ kostenlos?
Ja — der vollständige Text von „CSS Modules: bereichsbezogene Klassennamen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „CSS Modules: bereichsbezogene Klassennamen“?
Aktivieren Sie CSS Modules in einem Vite- oder webpack-Projekt, um Klassennamen automatisch auf die Komponentendatei zu begrenzen und globale Style-Leaks zu vermeiden. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „CSS Modules: bereichsbezogene Klassennamen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- BEM-Methodik: Block, Element, Modifier
- CSS Modules: bereichsbezogene Klassennamen
- CSS-in-JS: Styled-components und Emotion
- Tailwind CSS: Utility-First-Ansatz