Lektion 13 von 16 14 Min. Fortgeschritten Zur Übung Mit Codebeispiel

Cascade Layers & Nesting

Moderne CSS-Architektur steuert die Reihenfolge von Regeln bewusst. Layers, Nesting und :has() lösen viele Konflikte ohne !important.

Ansicht

Verstehen

Lies die Kernidee und das Beispiel.

Prüfen

Beantworte die Aktiv-Checks.

Anwenden

Setze die Transferaufgabe um.

Lerninhalt

Verstehen & anwenden

Cascade Layers

@layer legt eine Reihenfolge fest: Spätere Layers gewinnen bei gleicher Spezifität.

So lassen sich Reset, Basis, Komponenten und Utilities sauber trennen.

Die Reihenfolge wird einmal deklariert. Innerhalb einer Layer bleibt Spezifität wichtig, aber der grobe Konflikt ist bereits entschieden.

@layerCascadeReset

Layer-Reihenfolge

@layer reset, base, components, utilities;

@layer base {
  a { color: #0f766e; }
}

@layer components {
  .button { color: white; }
}

Nesting

Mit Nesting steht eine Variante direkt bei ihrer Basisregel.

Das &-Zeichen verweist auf den übergeordneten Selektor.

Nesting ersetzt keine Klassennamen. Tiefe Verschachtelung macht Styles schwer überschaubar, deshalb flach halten.

Nesting&Verschachtelung

Karte mit Zustand

.card {
  padding: 1rem;

  &:hover {
    border-color: #0f766e;
  }

  .card__title {
    margin: 0;
  }
}

:has(), :is() und :where()

:has() wählt ein Element danach aus, was es enthält.

Damit lassen sich Eltern stylen, ohne JavaScript.

:is() bündelt mehrere Selektoren, :where() tut dasselbe mit Spezifität null. :where() ist ideal für Baselines, die leicht überschrieben werden sollen.

:has():is():where()

Feld mit Fehler hervorheben

.form-field:has(input:invalid) {
  border-color: #b91c1c;
}

:where(h1, h2, h3) {
  line-height: 1.2;
}

Vertiefung

Reihenfolge vor Spezifität

Cascade Layers legen eine grobe Reihenfolge fest: reset, base, components, utilities. Innerhalb einer Layer entscheidet weiterhin die Spezifität, aber konkurrierende Architekturbereiche sind getrennt.

Nesting hält Varianten bei ihrer Basisregel. :has() erlaubt Elternselektoren, :where() senkt die Spezifität auf null. Zusammen ersetzen sie viele fragile Selektorketten.

Layers und :has()

@layer reset, base, components;

@layer components {
  .field:has(input:invalid) {
    border-color: #b91c1c;
  }
}

:where(h1, h2, h3) {
  line-height: 1.2;
}

Merksatz: Layers ordnen Architektur, Nesting ordnet Nähe, :where() senkt Spezifität. Das ist wartbarer als !important.

Übungsaufgabe

Layer-Struktur für ein Design-System

Lege die Layers reset, base und components an. Style einen Button in components und hebe ein Formularfeld mit :has(input:invalid) hervor.

Das soll dein Programm können

@layer in fester Reihenfolge
Button in der components-Layer
Nesting für den Hover-Zustand
:has() für ein fehlerhaftes Feld
Kein !important

Dein Code

Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.

Dein Code wird automatisch auf diesem Gerät gespeichert.

Hinweis anzeigen

Die Reihenfolge im @layer-Statement entscheidet. Der Hover kann verschachtelt als &:hover geschrieben werden.

Lösung anzeigen

Layer-Struktur für ein Design-System.css

@layer reset, base, components;

@layer components {
  .button {
    background: #0f766e;
    color: white;

    &:hover {
      background: #115e59;
    }
  }

  .field:has(input:invalid) {
    border-color: #b91c1c;
  }
}

Warum funktioniert das?

Die Layer-Reihenfolge bleibt stabil, auch wenn später weitere Regeln dazukommen. :has() hebt das Feld hervor, ohne JavaScript oder eine zusätzliche Fehlerklasse.

Aufgabe geschafft

Aktiv-Check

Teste dein Verständnis

1/6

Erkennen: Welcher Abschnitt passt?

Welcher Abschnitt passt zu diesen Begriffen?

@layerCascadeReset

Tipp: Erst erinnern, dann prüfen. Fehler sind Teil des Lernens.

Transfer

Mini-Projekt: Design-System-Karte

Baue eine Karte mit Cascade Layers, Container Query, Fokusring und reduzierter Bewegung. Prüfe sie in einem schmalen und einem breiten Container.

Bild im Kopf

CSS ist wie ein Styleguide für ein Magazin: Es beschreibt, wie Überschriften, Abstände und Farben aussehen – an einer Stelle, für viele Seiten.

Lernziele

Du ordnest Stylesheets mit Cascade Layers.
Du schreibst verschachtelte Regeln lesbar.
Du nutzt :has(), :is() und :where() gezielt.

Begriffe kurz erklärt

Cascade: Benannte Ebene, die die Reihenfolge von CSS-Regeln unabhängig von ihrer Spezifität ordnet.
Nesting: Verschachtelte CSS-Regeln, bei denen & auf den übergeordneten Selektor verweist.
:has(): Pseudoklasse, die ein Element anhand seiner Kinder auswählt.
:where(): Pseudoklasse mit Spezifität null, ideal für leicht überschreibbare Baselines.

Typische Fehler

✕ Konflikte mit !important lösen

✓ Cascade Layers und niedrige Spezifität verwenden

!important verschiebt das Problem nur und macht spätere Änderungen schwer nachvollziehbar.

Deine Lernnotiz

Schreib in eigenen Worten auf, was du behalten willst. Das ist aktives Lernen.

Du ordnest Stylesheets mit Cascade Layers.
Du schreibst verschachtelte Regeln lesbar.

Wird automatisch auf diesem Gerät gespeichert.

Selbstcheck

Kann ich das schon?

Hake ab, was du wirklich erklären oder selbst bauen könntest.

0 von 3 geschafft

Fortschritt

Bereit zum Abschließen?

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.