CSS Modules

CSS Modules funktionieren fast wie Vanilla CSS — aber mit einem entscheidenden Unterschied: Klassennamen werden automatisch eindeutig gemacht. Kein BEM nötig, keine Namenskonflikte.

Installation & Konfiguration

Auch hier gibt es nichts zu installieren. Vite unterstützt CSS Modules nativ. Du musst nur deine CSS-Dateien mit .module.css benennen:

Button.module.css   ← CSS Module
Button.css          ← normales CSS (global)

Das .module. im Dateinamen ist das einzige, was den Unterschied macht.

Verwendung

Statt die CSS-Datei nur zu importieren, importierst du sie als Objekt. Jede Klasse wird eine Eigenschaft dieses Objekts:

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

// classes.button → "Button_button_x7d2f" (eindeutiger Klassenname)

`Button.module.css`

.button {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #ffffff;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
}

.button:hover {
  background-color: #f3f4f6;
}

.primary {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.primary:hover {
  background-color: #1d4ed8;
}

Beachte: Wir brauchen kein BEM mehr. Die Klasse heißt einfach .primary statt .button--primary — CSS Modules sorgen dafür, dass sie eindeutig ist.

`Button.jsx`

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

function Button({ variant = "default", children }) {
  const className = variant === "primary"
    ? `${classes.button} ${classes.primary}`
    : classes.button;

  return (
    <button className={className}>{children}</button>
  );
}

export default Button;

`Card.module.css`

.card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.title {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

.title h2 {
  margin: 0;
  font-size: 18px;
}

.content {
  padding: 20px;
}

`CardTitle.jsx`

import classes from './Card.module.css';

function CardTitle({ children }) {
  return (
    <header className={classes.title}>
      <h2>{children}</h2>
    </header>
  );
}

export default CardTitle;

Hier nutzen wir .title h2 — einen Element-Selektor innerhalb einer Klasse. Das funktioniert, weil CSS Modules nur Klassennamen hashen, nicht Element-Selektoren wie h2. Im Browser wird daraus .Card_title_x7d2f h2, und das trifft jedes <h2> innerhalb des gescopten Containers.

`CardContent.jsx`

import classes from './Card.module.css';

function CardContent({ children }) {
  return (
    <div className={classes.content}>{children}</div>
  );
}

export default CardContent;

`Card.jsx`

import classes from './Card.module.css';

function Card({ children }) {
  return (
    <article className={classes.card}>{children}</article>
  );
}

export default Card;

`App.module.css`

.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: system-ui, sans-serif;
}

.header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;

  .headline {
    margin: 0;
    font-size: 24px;
  }
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

`App.jsx`

import classes from './App.module.css';
import Card from "./Card";
import CardTitle from "./CardTitle";
import CardContent from "./CardContent";
import Button from "./Button";

function App() {
  return (
    <div className={classes.app}>
      <header className={classes.header}>
        <img
          src="https://react.dev/images/brand/logo_light.svg"
          alt="React Logo"
          width="40"
          height="40"
        />
        <h1 className={classes.headline}>CSS mit React</h1>
      </header>

      <main>
        <Card>
          <CardTitle>Willkommen</CardTitle>
          <CardContent>
            <p>
              Diese kleine App zeigt, wie du React-Komponenten mit
              verschiedenen CSS-Ansätzen stylen kannst. Die Struktur
              bleibt immer gleich — nur das Styling ändert sich.
            </p>
            <div className={classes.actions}>
              <Button>Zurück</Button>
              <Button variant="primary">Weiter</Button>
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  );
}

export default App;

Vergleiche das mit Card.module.css, wo wir .title h2 verwendet haben: Dort brauchte das <h2> keine eigene Klasse, weil h2 ein Element-Selektor ist, den CSS Modules nicht verändert. Hier dagegen ist .headline eine Klasse — und CSS Modules hasht sie unabhängig. Aus .header .headline wird im Browser .App_header_a3f2d .App_headline_k8x1m. Deshalb musst du im JSX beide Klassen explizit anwenden — classes.header auf dem <header> und classes.headline auf dem <h1>.

Was passiert im Browser?

Wenn du die DevTools öffnest, siehst du generierte Klassennamen wie:

<button class="Button_button_x7d2f Button_primary_a3k9m">Weiter</button>

Der Dateiname und die Klasse werden kombiniert, plus ein eindeutiger Hash. So kann es niemals zu Konflikten kommen — selbst wenn zwei Komponenten eine Klasse .button definieren.

Vor- und Nachteile

Vorteile	Nachteile
Automatisch eindeutige Klassennamen — keine Konflikte	CSS und Komponente sind in separaten Dateien
Vertraute CSS-Syntax — kein neues API	Dynamische Styles erfordern Klassen-Kombination
CSS liegt direkt neben der Komponente	Kein Zugriff auf JavaScript-Variablen im CSS
Kein Runtime-Overhead — alles wird zur Build-Zeit aufgelöst