Lektion 4: CSS-Grundlagen und Kaskade: Refactoring-Strategie

Konzepterklärung

Refactoring in CSS bedeutet, die Struktur zu verbessern, ohne das visuelle Ergebnis zu verändern. In dieser Lektion nehmen Sie einen kleinen Satz wiederholter Regeln und organisieren diese in sauberere, leichter wartbare Stile um. Ziel ist es zu erkennen, wann Deklarationen in eine gemeinsame Utility gehören, wann eine Komponente einen eigenen Selektor verdient und wie Custom Properties Duplikate reduzieren können. Am Ende sollten Sie in der Lage sein, ein unübersichtliches Stylesheet in etwas Konsistenteres, Lesbareres und sicherer Erweiterbares zu verwandeln.

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 Ausgabe und schneller Validierung ab.

Befehlsreferenz

• Beginnen Sie damit, Deklarationen zu finden, die mehr als einmal vorkommen, und gruppieren Sie diese bewusst.
• Verschieben Sie wiederholte Abstands-, Rahmen- oder Farbwerte in Custom Properties, wenn sie eindeutig zusammengehören.
• Überprüfen Sie die Seite vor und nach dem Refactoring, um zu bestätigen, dass das Design immer noch gleich aussieht.
• Notieren Sie einen Grund, warum Ihre aktualisierten Selektoren einfacher zu warten sind als die Originalversion.

Schritt-für-Schritt-Anleitung

1. Lesen Sie das Starter-CSS und markieren Sie alle wiederholten Werte oder wiederholten Selektormuster.
2. Wählen Sie zuerst ein Refactoring, z. B. das Zusammenführen doppelter Kartenstile oder das Extrahieren einer gemeinsamen Variable.
3. Führen Sie die Seite erneut aus und bestätigen Sie, dass sich das visuelle Ergebnis nicht versehentlich geändert hat.
4. Überprüfen Sie die neue Struktur und entscheiden Sie, ob die Selektornamen für jemand anderen, der die Datei liest, noch sinnvoll sind.
5. Schließen Sie mit einer kurzen Checkliste ab: weniger Wiederholung, klarere Benennung, gleiche Ausgabe.

Übungsaufgaben

• Refaktorieren Sie ein Button-Stylesheet, das dieselben `padding`-, `border-radius`- und `font`-Regeln in drei Klassen wiederholt.
• Nehmen Sie eine Gruppe von Alert-Stilen und extrahieren Sie gemeinsame Regeln, während Sie Erfolgs- und Fehler-Varianten getrennt halten.
• Schreiben Sie ein kleines Stylesheet so um, dass Abstands-Werte aus Variablen stammen statt aus fest codierten Zahlen.

Coding-Challenges

• Erstellen Sie zwei gültige Refactorings für dasselbe Stylesheet und vergleichen Sie, welches später einfacher zu erweitern ist.
• Refaktorieren Sie eine Komponente, ohne die Selektor-Spezifität zu erhöhen oder Überschreibungen zu erschweren.

Kleine Übungsaufgaben

• Benennen Sie einen Selektor um, damit sein Zweck auf den ersten Blick klarer ist.
• Extrahieren Sie einen wiederholten Wert in eine Custom Property.
• Fassen Sie den Hauptvorteil Ihres Refactorings in einem Satz zusammen.