Vanilla CSS

Der einfachste Weg, React-Komponenten zu stylen: CSS in separaten Dateien schreiben und über className verbinden. Genau so, wie du es von HTML und CSS kennst.

Installation & Konfiguration

Hier gibt es nichts zu installieren. Vite (und damit jedes Vite-Projekt) kann .css-Dateien direkt importieren. Du schreibst dein CSS, importierst die Datei — fertig.

import './App.css';

Der Import sorgt dafür, dass die CSS-Datei ins Bundle aufgenommen wird. Die Klassen sind danach global verfügbar.

Verwendung

Wir stylen unsere Beispiel-App Komponente für Komponente. Dabei verwenden wir BEM-Naming (Block-Element-Modifier), um Namenskonflikte zu vermeiden.

`Button.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;
}

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

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

`Button.jsx`

import './Button.css';

function Button({ variant = "default", children }) {
  const className = variant === "primary"
    ? "button button--primary"
    : "button";

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

export default Button;

`Card.css`

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

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

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

.card__content {
  padding: 20px;
}

`CardTitle.jsx`

import './Card.css';

function CardTitle({ children }) {
  return (
    <header className="card__title">
      <h2>{children}</h2>
    </header>
  );
}

export default CardTitle;

`CardContent.jsx`

import './Card.css';

function CardContent({ children }) {
  return (
    <div className="card__content">{children}</div>
  );
}

export default CardContent;

`Card.jsx`

import './Card.css';

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

export default Card;

`App.css`

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

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

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

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

`App.jsx`

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

function App() {
  return (
    <div className="app">
      <header className="app__header">
        <img
          src="https://react.dev/images/brand/logo_light.svg"
          alt="React Logo"
          width="40"
          height="40"
        />
        <h1>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="app__actions">
              <Button>Zurück</Button>
              <Button variant="primary">Weiter</Button>
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  );
}

export default App;

BEM-Naming

BEM steht für Block-Element-Modifier und ist eine Namenskonvention:

Block — Die Komponente selbst: .card, .button
Element — Ein Teil innerhalb des Blocks: .card__title, .card__content
Modifier — Eine Variante: .button--primary

BEM ist kein Muss, aber es hilft, Klassen eindeutig zu halten — besonders in größeren Projekten mit vielen Komponenten.

Vor- und Nachteile

Vorteile	Nachteile
Kein Tooling nötig — funktioniert überall	Klassen sind global — Namenskonflikte möglich
Vertraute Syntax für alle, die CSS kennen	Keine Garantie, dass CSS und Komponente zusammenbleiben
Volle Browser-DevTools-Unterstützung	Naming-Disziplin (z.B. BEM) liegt beim Entwickler
Gute Performance — kein Runtime-Overhead	Ungenutzte Styles werden nicht automatisch entfernt