styled-components: CSS-in-JS für React

styled-components bringt einen neuen Ansatz für das Styling von React-Komponenten — CSS direkt in JavaScript mit der vollen Kraft der Sprache. Keine CSS-Klassennamen-Kollisionen mehr.

Probleme mit traditionellem CSS in einer Komponentenwelt¶

CSS wurde für Dokumente entworfen, nicht für Komponenten. In einer React-Anwendung mit dutzenden Komponenten stoßen Sie auf:

• Globaler Scope — Klassennamen kollidieren über Komponenten hinweg
• Dead Code — Sie wissen nicht, welche Styles noch verwendet werden
• Dynamische Styles — CSS hat keinen Zugriff auf Props und State
• Co-Location — Styles sind getrennt von den Komponenten, die sie stylen

styled-components löst all diese Probleme.

Tagged Template Literals¶

styled-components verwendet ES6 Tagged Template Literals:

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? '#00d4ff' : 'transparent'};
  color: ${props => props.primary ? '#040c0f' : '#00d4ff'};
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid #00d4ff;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background: #00d4ff;
    color: #040c0f;
  }
`;

// Usage
<Button primary>Primary action</Button>
<Button>Secondary</Button>

Jede Komponente generiert einen einzigartigen Klassennamen — keine Kollisionen, kein BEM, kein Overhead.

Vorteile von CSS-in-JS¶

Warum CSS-in-JS Sinn ergibt:

• Scoping — automatisch isolierte Styles pro Komponente
• Dynamische Styles — voller Zugriff auf Props und State
• Dead Code Elimination — Komponente löschen und die Styles verschwinden mit ihr
• Theming — ThemeProvider für konsistente Design Tokens
• Server-Side Rendering — automatische Critical-CSS-Extraktion
• TypeScript-Unterstützung — getypte Props für Styles

Kritik und Alternativen¶

CSS-in-JS ist nicht ohne Kontroversen:

• Runtime-Overhead — Styles werden in JavaScript generiert
• Bundle-Größe — styled-components fügt ~12KB gzipped hinzu
• Lernkurve für CSS-Puristen
• Debugging — generierte Klassennamen sind unlesbar (gelöst durch ein Babel-Plugin)

Alternativen: CSS Modules (Build-Time Scoping), Emotion (performantere Runtime), Glamorous (API inspiriert von styled-components).

Fazit: Ein neuer Standard für React-Styling¶

styled-components verändert die Art, wie wir über Styling in React-Anwendungen denken. Für neue React-Projekte empfehlen wir CSS-in-JS als Standardansatz — die Produktivitäts- und Wartungsvorteile überwiegen die geringfügigen Nachteile.