Lektion 7: CSS-Grundlagen und Kaskade: Performance-Aspekte

Konzepterklärung

Performance in CSS dreht sich meist weniger um reine Geschwindigkeit, sondern vielmehr darum, Stile vorhersehbar, einfach anwendbar und kostengünstig wartbar zu halten, während eine Seite wächst. In dieser Lektion gestalten Sie ein kleines Karten-Layout und achten dabei auf die Einfachheit von Selektoren, wiederverwendbare Abstandsregeln und die Vermeidung unnötiger Überschreibungen. Ziel ist es zu erkennen, wie eine klare Struktur zukünftige Styling-Arbeiten reduzieren und Änderungen sicherer machen kann. Am Ende sollten Sie in der Lage sein zu erkennen, wann ein Stylesheet schwerer skalierbar wird, und es in eine leichtere, konsistentere Version umzuschreiben.

Wo der Code hingehört

1. Beginnen Sie mit Variablen und Inputs. Platzieren Sie Stilregeln in wiederverwendbaren Klassenselektoren.
2. Fügen Sie die Verarbeitungslogik im mittleren Abschnitt hinzu.
3. Schließen Sie mit der Ausgabe und einer schnellen Validierung ab.

Befehlsreferenz

• Beginnen Sie mit zwei Karten, die dieselbe Struktur teilen, und bestätigen Sie dann, dass beide dieselbe Basisformatierung erhalten.
• Ändern Sie ein Design-Token wie `--card-padding` oder `--border-color` und beobachten Sie, wie viele Elemente gleichzeitig aktualisiert werden.
• Vergleichen Sie eine Version, die Stile in jedem Selektor wiederholt, mit einer Version, die gemeinsame Klassen und Variablen verwendet.
• Notieren Sie einen Grund, warum einfache Selektoren leichter zu pflegen sind, wenn ein Layout wächst.

Schritt-für-Schritt-Anleitung

1. Fügen Sie das Starter-CSS in eine kleine Demo-Seite mit zwei oder drei Karten ein.
2. Prüfen Sie, dass Abstände, Ränder und Textfarbe aus gemeinsamen Regeln stammen und nicht aus wiederholten Deklarationen.
3. Ändern Sie einen Token-Wert und bestätigen Sie, dass die Aktualisierung konsistent auf allen Karten erscheint.
4. Fügen Sie einen zusätzlichen Modifikator oder eine Variation hinzu, ohne die Basis-Kartenstile zu beeinträchtigen.
5. Überprüfen Sie das Ergebnis und notieren Sie, welche Regel das Stylesheet später leichter erweiterbar macht.

Übungsaufgaben

• Erstellen Sie eine kompakte Kartenvariante mit engeren Abständen, während die gleiche Basis-Kartenklasse beibehalten wird.
• Schreiben Sie das Beispiel ohne Design-Tokens neu und vergleichen Sie dann, welche Version einfacher anzupassen ist.
• Erstellen Sie eine kleine Liste von drei UI-Elementen, die dieselben Abstands- oder Randvariablen wiederverwenden könnten.

Coding-Challenges

• Refaktorieren Sie eine ausführliche Menge wiederholter Karten-Selektoren in ein kleineres System mit gemeinsamen Basisstilen.
• Fügen Sie eine Dark-Theme-Variation hinzu, indem Sie Variablen ändern, anstatt jede Komponentenregel zu duplizieren.

Kleine Übungsaufgaben

• Benennen Sie eine Klasse um, um ihren Zweck klarer zu machen.
• Fügen Sie eine kleine Verbesserung hinzu, die wiederholte Werte reduziert.
• Fassen Sie in einer Zeile zusammen, warum dieses Stylesheet einfacher zu skalieren ist.