CSS Best Practices

Benennung, Wiederverwendung, Design-Systeme, !important und wartbare Dateien. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• wartbare CSS-Strukturen planen
• Wiederholung sinnvoll reduzieren
• Spezifitäts- und !important-Probleme vermeiden

Erklärung

CSS wächst schnell. Gute Benennung, klare Komponenten und wiederkehrende Variablen verhindern, dass kleine Änderungen unerwartet große Nebenwirkungen haben.

!important ist selten eine Lösung. Meist weist es auf zu hohe Spezifität, unklare Reihenfolge oder fehlende Komponentenstruktur hin.

Beispiele

.profile-card {
  padding: var(--space-4);
  border-radius: 0.5rem;
}

.profile-card__title {
  margin: 0;
}

Eine klare Komponentenbenennung macht Zugehörigkeit sichtbar.

.red-big-left-box {
  color: red !important;
  font-size: 30px;
  float: left;
}

Diese Klasse beschreibt Optik statt Aufgabe und ist schwer wiederzuverwenden.

Typische Fehler

• Klassen nach aktueller Farbe oder Position benennen.
• Viele fast gleiche Regeln kopieren.
• Spezifitätsprobleme mit !important stapeln.

Best Practices

• Denke in Komponenten und Zuständen.
• Lege zentrale Variablen für wiederkehrende Werte an.
• Lösche ungenutztes CSS regelmäßig.

Kleine Übung

Überarbeite ein CSS-Beispiel mit drei ähnlichen Buttons zu einer Basis-Klasse und zwei Modifier-Klassen.

Zusammenfassung

CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.

Weiterführende Seiten

• Vorherige Seite: CSS Variablen
• Nächste Seite: CSS Übungen
• Zur Übersicht
• CSS Variablen
• CSS Übungen