CSS sauber organisieren

Kleine Seiten verzeihen Chaos, große nicht. Mit ein paar Gewohnheiten bleibt dein CSS auch nach Monaten verständlich.

Ein Reset und gute Grundwerte

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.6; font-family: system-ui, sans-serif; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; line-height: 1.2; }

Aufbau einer Stylesheet-Datei

Eine bewährte Reihenfolge, vom Allgemeinen zum Speziellen:

1. Variablen (:root)
2. Reset und Basis (Elemente: body, a, h1 ...)
3. Layout (Raster, Container, Seitenaufbau)
4. Komponenten (.karte, .button, .menue)
5. Hilfsklassen (.zentriert, .sr-only)
6. Media Queries (am besten direkt bei der jeweiligen Komponente)

Benennung

Gute Klassennamen beschreiben die Funktion, nicht das Aussehen:

Die BEM-Konvention (Block, Element, Modifier) macht Zusammenhänge sichtbar:

Wiederverwendbare Komponenten

Baue Bausteine, die an vielen Stellen funktionieren:

Häufige Fehler vermeiden

• !important nur in Hilfsklassen oder Notfällen
• Zu tiefe Selektoren (.a .b .c .d span): flach halten, ein bis zwei Ebenen
• Magische Zahlen (margin-top: 37px): lieber Variablen und ein Abstandssystem
• IDs für Stil vermeiden, Klassen nutzen
• Duplikate: wiederkehrende Werte als Variablen
• Feste Höhen vermeiden: min-height und Inhalt bestimmen lassen
• `outline: none` ohne Ersatz entfernt den sichtbaren Fokus

Abstandssystem

Statt zufälliger Werte nutzt du eine Skala:

Leistung

• Ein Stylesheet statt vieler kleiner Dateien; minimiert und komprimiert (gzip/brotli)
• Kritisches CSS (für den ersten Bildschirm) bei Bedarf direkt im <head>
• Nicht benötigtes CSS entfernen (Browser-Werkzeug "Coverage")
• will-change und contain nur gezielt einsetzen
• Schriften und Bilder optimieren: sie sind meist größer als das gesamte CSS

Werkzeuge

Dokumentation der Entscheidungen

Ein kurzer Kommentarkopf in der Datei ("Farben: ...; Abstände: ...; Breakpoints: ...") und ein Style-Guide mit allen Komponenten auf einer Seite sparen dir und dem Team viel Zeit.