0Pricing
CSS Academy · Lektion

CSS Modules: lokale Stile

Begrenzen Sie Klassennamen in Ihrer Build-Konfiguration automatisch lokal auf Komponenten – mit CSS Modules.

CSS Modules: lokale Stile ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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 CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind CSS-Module?

CSS-Module begrenzen CSS-Klassennamen automatisch auf die Komponentendatei, in der sie definiert sind. Jeder Klassenname wird zur Build-Zeit in eine eindeutige Kennung umgewandelt – dadurch wird verhindert, dass Styles ungewollt global wirken.

Dateikonvention

Benennen Sie Ihre CSS-Datei mit .module.css (oder .module.scss für Sass):

/* Button.module.css */
.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

CSS-Module importieren

Importieren Sie das Modul als JavaScript-Objekt. Klassennamen werden zu Eigenschaften:

import styles from './Button.module.css';

function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)

Zusammengesetzte Klassen

Verwenden Sie composes, um eine Klasse aus einem anderen Modul zu erweitern:

/* Button.module.css */
.primary {
  composes: base from "./Base.module.css";
  background: royalblue;
}

Globale Klassen

Verwenden Sie :global(), um für eine bestimmte Klasse die lokale Begrenzung zu deaktivieren:

/* styles.module.css */
.container :global(.third-party-class) {
  /* targets third-party className without scoping */
  color: red;
}

CSS-Module in Vite

Vite unterstützt CSS-Module standardmäßig. Dateien, die dem Muster *.module.css entsprechen, werden automatisch verarbeitet:

// vite.config.js
export default {
  css: {
    modules: {
      localsConvention: 'camelCase' // .my-class → styles.myClass
    }
  }
}

CSS-Module in webpack

Aktivieren Sie Module in der Konfiguration von css-loader:

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]__[local]--[hash:base64:5]'
    }
  }
}

Klassennamen zusammensetzen

Kombinieren Sie mehrere Modulklassen mithilfe von Template-Literalen oder der Bibliothek clsx/classnames:

import styles from './Card.module.css';
import clsx from 'clsx';

function Card({ featured }) {
  return (
    <div className={clsx(styles.card, featured && styles.featured)}>
      Content
    </div>
  );
}

Keine Laufzeitkosten

CSS-Module werden vollständig zur Build-Zeit aufgelöst – es entsteht kein JavaScript-Overhead zur Laufzeit. Die Ausgabe ist standardmäßiges CSS mit umbenannten Klassennamen. Dadurch eignen sie sich ideal für performancekritische Anwendungen.

TypeScript-Unterstützung

Generieren Sie TypeScript-Typdefinitionen für CSS-Module mit typed-css-modules oder der Vite-Konfiguration cssModuleTypes, um typsicher auf Klassennamen zuzugreifen.

CSS-Module im Vergleich zu CSS-in-JS

Vergleich von CSS-Modulen:

  • Nur zur Build-Zeit – keine JavaScript-Laufzeitkosten
  • Integration mit Standard-CSS/Sass – vertraute Syntax
  • Keine dynamischen Styles über Interpolation in JavaScript
  • Weniger flexibel bei themenabhängigen dynamischen Styles als styled-components/Emotion

Schnelltest

Wie verhindert ein CSS-Modul Kollisionen von Klassennamen zwischen zwei verschiedenen Komponentendateien?

Zusammenfassung

CSS-Module begrenzen Klassennamen automatisch, indem sie diese zur Build-Zeit in eindeutige Kennungen umwandeln. Importieren Sie sie als JavaScript-Objekte und greifen Sie auf Klassen als Eigenschaften zu. Verwenden Sie :global() für globale Selektoren ohne lokale Begrenzung und composes zum Zusammensetzen von Klassen. Keine Laufzeitkosten sowie die vollständige Unterstützung der CSS-/Sass-Syntax machen CSS-Module zu einer schlanken Alternative zu CSS-in-JS für statische Styles.

Häufig gestellte Fragen

Ist die Lektion „CSS Modules: lokale Stile“ kostenlos?

Ja — der vollständige Text von „CSS Modules: lokale Stile“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „CSS Modules: lokale Stile“?

Begrenzen Sie Klassennamen in Ihrer Build-Konfiguration automatisch lokal auf Komponenten – mit CSS Modules. Du übst CSS 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 CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS 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 3 von 4.

Wie lange dauert die Lektion „CSS Modules: lokale Stile“?

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 CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS 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

  1. Styled-components: getaggte Template-Literale
  2. Emotion: css() und styled()
  3. CSS Modules: lokale Stile
  4. Vanilla Extract: CSS-in-JS ohne Laufzeit
← Zurück zu CSS Academy