Lektion 5: Grundlagen von CSS und Kaskade: Testen im Fokus

Konzepterklärung

CSS zu testen bedeutet nicht, sofort komplexe Tools zu schreiben. In dieser Phase geht es darum, zu lernen, Stile bewusst zu überprüfen, anstatt zu raten. Sie üben, ein Layout in einem Normalfall zu verifizieren und dann nach Randfällen wie längerem Text, engeren Breiten oder fehlenden Klassen zu suchen. Diese Lektion hilft Ihnen, die Gewohnheit zu entwickeln, das erwartete Verhalten nach jeder Stiländerung zu überprüfen, was besonders wichtig ist, wenn die Kaskade oder Vererbung mehr als einen Teil der Seite beeinflussen kann.

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 der Ausgabe und einer schnellen Validierung ab.

Befehlsreferenz

• Listen Sie die genauen visuellen Ergebnisse auf, die Sie erwarten, bevor Sie eine Regel ändern.
• Testen Sie dieselbe Komponente mit kurzem Text, langem Text und einer schmalen Containerbreite.
• Bestätigen Sie nach jeder Änderung, ob die Komponente weiterhin Abstände, Kontrast und eine lesbare Hierarchie beibehält.
• Notieren Sie einen Stil, der sich unerwartet geändert hat, und erklären Sie, welcher Selektor oder welche Kaskadenregel dies verursacht hat.

Schritt-für-Schritt-Anleitung

1. Wenden Sie zuerst die Start-Stile auf einen einfachen HTML-Block an und bestätigen Sie das Standardaussehen.
2. Überprüfen Sie einen Normalfall, z. B. eine kurze Nachricht mit einer klaren Überschrift.
3. Erstellen Sie einen Randfall, z. B. einen langen Satz oder einen kleineren Container, und überprüfen Sie das Ergebnis.
4. Ändern Sie eine einzelne Regel und vergleichen Sie dann beide Versionen, wenn möglich, nebeneinander.
5. Schließen Sie mit einer kurzen Überprüfung ab, was korrekt geblieben ist und was beim Testen kaputtgegangen ist.

Übungsaufgaben

• Testen Sie eine Badge-Komponente mit sehr kurzen und sehr langen Beschriftungen und passen Sie dann bei Bedarf den Abstand an.
• Erstellen Sie einen zweiten Alert-Stil und überprüfen Sie, ob jede Variante einen lesbaren Kontrast und klare Abstände beibehält.
• Erstellen Sie eine einfache Checkliste zum manuellen Testen von Typografie, Abständen und Ausrichtung in einer kleinen Komponente.

Coding-Challenges

• Entwerfen Sie ein Test-Setup, das aufdeckt, wenn ein breiter Selektor versehentlich mehrere Komponenten beeinflusst.
• Finden Sie einen Layout-Fehler, der durch Vererbung oder die Kaskade verursacht wurde, und beheben Sie ihn, ohne einen neuen einzuführen.

Kleine Übungsaufgaben

• Schreiben Sie ein erwartetes Ergebnis für den Normalfall auf.
• Erstellen Sie einen Randfall mit längerem Inhalt.
• Notieren Sie eine Styling-Regel, die visuell am einfachsten zu überprüfen war.