Lektion 10: CSS-Grundlagen und Kaskade: Projektintegration

Konzepterklärung

Diese Lektion verwandelt eine kleine Styling-Aufgabe in etwas, das näher an echter Interface-Arbeit ist. Anstatt isolierte Regeln zu schreiben, gestalten Sie eine wiederverwendbare Preiskarte und überlegen, wie eine Komponente in eine größere Seite passt. Das Hauptziel ist es, die Projektintegration in den CSS-Grundlagen und der Kaskade zu üben: sinnvolle Standardwerte wählen, Abstände und Ränder konsistent halten und Aktualisierungen an einer Stelle vornehmen, ohne anderswo Nebenwirkungen zu verursachen. Am Ende sollten Sie in der Lage sein, einfache CSS-Regeln zu einer Komponente zu verbinden, die sich organisiert, vorhersehbar und wiederverwendbar anfühlt.

Wo der Code hingehört

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

Befehlsreferenz

• Zeigen Sie die Karte mit echtem Inhalt in der Vorschau an und prüfen Sie, ob die Abstände noch ausgewogen wirken.
• Ändern Sie ein Design-Token wie `border radius` oder `accent color` und vergleichen Sie das Ergebnis.
• Gruppieren Sie verwandte Regeln, damit die Karte später leichter zu überblicken und zu warten ist.
• Prüfen Sie, ob der Call-to-Action vor seiner Hintergrundfarbe lesbar bleibt.

Schritt-für-Schritt-Anleitung

1. Wenden Sie zuerst die grundlegenden Kartenstile an, damit die Komponente klare Grenzen und Abstände hat.
2. Gestalten Sie Überschrift, Preis und Schaltfläche in einer logischen Reihenfolge, anstatt zwischen Regeln hin- und herzuspringen.
3. Testen Sie eine kleine visuelle Änderung, wie z.B. größere Abstände oder einen weicheren Rand, und vergleichen Sie beide Versionen.
4. Überprüfen Sie die Kaskade, um zu bestätigen, dass Ihre Selektoren spezifisch genug sind, ohne überladen zu wirken.
5. Schließen Sie ab, indem Sie prüfen, ob die Komponente auch bei Wiederverwendung auf einer anderen Seite noch sinnvoll wäre.

Übungsaufgaben

• Erstellen Sie eine zweite Preiskarten-Variante für einen "featured" Plan, ohne alle bestehenden Stile neu zu schreiben.
• Fügen Sie einen subtilen Hover-Zustand für die Schaltfläche hinzu und erklären Sie, warum die Änderung die Komponente verbessert.
• Refaktorieren Sie die Karte, damit gemeinsame Werte wie Farben und Abstände leichter wiederverwendet werden können.

Coding-Challenges

• Erstellen Sie einen kleinen Preisbereich mit drei Karten, wobei jede Karte visuell konsistent bleibt.
• Reduzieren Sie Wiederholungen, indem Sie wiederverwendbare Utility-Ideen oder gemeinsame benutzerdefinierte Eigenschaften einführen.

Kleine Übungsaufgaben

• Benennen Sie eine Klasse um, um ihren Zweck offensichtlicher zu machen.
• Fügen Sie eine Verbesserung hinzu, die der Komponente ein "polierteres" Gefühl verleiht.
• Schreiben Sie eine Zeile, die beschreibt, was diese Kartenkomponente kommunizieren soll.