Lektion 9: CSS-Grundlagen und Kaskade: Architektur-Checkpunkt

Konzepterklärung

Architektur in CSS bedeutet zu entscheiden, wo Stile hingehören, bevor ein Stylesheet unübersichtlich wird. In dieser Lektion organisieren Sie einen kleinen Seitenabschnitt mithilfe von Basisstilen, Komponentenstilen und einem einfachen Benennungsmuster, sodass jede Regel eine klare Aufgabe hat. Anstatt Deklarationen überall dort hinzuzufügen, wo sie zu funktionieren scheinen, gruppieren Sie sie so, dass zukünftige Bearbeitungen einfacher werden. Diese Art von Struktur ist wichtig, sobald ein Projekt mehr als eine Seite oder mehr als eine Person hat, die die Stile bearbeitet.

Wo der Code hingehört

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

Befehlsreferenz

• Trennen Sie Basiswerte, Komponentenregeln und Variationen, damit jede Gruppe einen klaren Zweck hat.
• Testen Sie den `featured`-Modifikator und bestätigen Sie, dass er die Komponente ändert, ohne jede Eigenschaft neu zu schreiben.
• Ordnen Sie jeden Selektor seiner Rolle zu: Basistoken, Komponentenblock, Kindelement oder Modifikator.
• Notieren Sie eine Architekturentscheidung, die hilfreich wäre, wenn das Projekt auf mehrere ähnliche Karten anwachsen würde.

Schritt-für-Schritt-Anleitung

1. Identifizieren Sie, welche Regeln wiederverwendbare Werte definieren und welche Regeln nur zur Profilkartenkomponente gehören.
2. Wenden Sie die Stile auf eine normale Karte und eine hervorgehobene Karte an, um die Struktur und Variation zu vergleichen.
3. Fügen Sie ein neues Kindelement hinzu, z. B. eine Beschreibung, ohne das bestehende Benennungsmuster zu durchbrechen.
4. Prüfen Sie, ob der Modifikator nur das Notwendige ändert und keine Basisstile dupliziert.
5. Überprüfen Sie das Stylesheet und beachten Sie, wie die Struktur beim späteren Hinzufügen weiterer Komponenten helfen würde.

Übungsaufgaben

• Erstellen Sie eine zweite Komponente, z. B. eine Benachrichtigungskarte, die dieselbe Token-Schicht, aber andere Komponentenklassen verwendet.
• Refaktorieren Sie die Karte, sodass Abstände und Farben einfacher von einem einzigen Ort aus aktualisiert werden können.
• Erstellen Sie ein kleines Beispiel mit einer Basiskarte und zwei Modifikator-Variationen.

Coding-Challenges

• Entwerfen Sie eine Mini-Komponentenstruktur für ein Dashboard-Panel mit Titel, Untertitel und hervorgehobenem Zustand.
• Vergleichen Sie ein flaches Stylesheet mit einem Token-plus-Komponenten-Ansatz und erklären Sie, welcher einfacher zu pflegen ist.

Kleine Übungsaufgaben

• Fügen Sie eine Modifikator-Klasse hinzu, ohne die gesamte Komponente zu duplizieren.
• Benennen Sie einen Selektor um, damit er seine Rolle in der Struktur besser widerspiegelt.
• Fassen Sie die Architektur in einem klaren Satz zusammen.