Lektion 6: CSS-Grundlagen und Kaskade: Praxisbeispiel

Konzepterklärung

Diese Lektion führt Sie von isolierten Übungen zu einem kleinen, realistischen Interface-Problem. Sie gestalten einen Theme-Schalter für ein kartenähnliches Layout mithilfe von Custom Properties, sodass eine Änderung mehrere Teile des Designs gleichzeitig aktualisiert. Der Fokus liegt nicht darauf, etwas Auffälliges zu erstellen, sondern Stile auf eine Weise zu organisieren, die sich praktisch anfühlt: lesbare Variablen, klare Komponentenregeln und vorhersehbare Überschreibungen. Anhand eines realistischen Beispiels werden Sie sehen, wie die Kaskade wiederverwendbare Designentscheidungen unterstützt, anstatt zu einer Quelle der Verwirrung zu werden.

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

• Identifizieren Sie, welche Werte sich zwischen Themes ändern sollen, und platzieren Sie nur diese in Custom Properties.
• Testen Sie die Komponente in hellen und dunklen Modi, um zu bestätigen, dass Text und Hintergrund weiterhin harmonieren.
• Passen Sie ein Token an, z. B. Akzentfarbe oder Abstände, und beobachten Sie, wie viele Stellen sich automatisch aktualisieren.
• Erklären Sie einen Grund, warum dieses Setup praktischer ist, als die vollständigen Komponentenregeln für jedes Theme zu duplizieren.

Schritt-für-Schritt-Anleitung

1. Beginnen Sie mit den Basisvariablen und überprüfen Sie, ob das helle Theme korrekt aussieht.
2. Fügen Sie die Theme-Modifikator-Klasse hinzu und prüfen Sie, welche Eigenschaften sich durch die Kaskade ändern.
3. Gestalten Sie die Komponente, wo immer möglich, mit Variablen anstelle von fest kodierten Farben.
4. Ändern Sie einen Theme-Wert, z. B. die Akzentfarbe, und vergleichen Sie das Ergebnis vorher und nachher.
5. Überprüfen Sie die endgültige Struktur und stellen Sie sicher, dass die Komponentenregeln von den Theme-Regeln getrennt bleiben.

Übungsaufgaben

• Erstellen Sie eine zweite Komponente, z. B. einen Button oder ein Badge, die dieselben Theme-Variablen wiederverwendet.
• Fügen Sie ein `muted text token` hinzu und wenden Sie es auf unterstützenden Text innerhalb der Karte an.
• Erstellen Sie eine Variante, die dasselbe Theme-System verwendet, aber eine andere Akzentfarbe für Warnungen.

Coding-Challenges

• Skalieren Sie das Theme-Setup, um mehrere Komponenten zu unterstützen, ohne vollständige Regelsätze zu kopieren.
• Halten Sie die Theme-Regeln leicht überschreibbar und vermeiden Sie verwirrende Selektorketten.

Kleine Übungsaufgaben

• Fügen Sie ein neues Design-Token für Abstände oder Farben hinzu.
• Benennen Sie eine Klasse um, um ihre Aufgabe besser widerzuspiegeln.
• Beschreiben Sie in einer Zeile, welches Problem Custom Properties in diesem Beispiel lösen.