Dies ist eine alte Version des Dokuments!
CSS Nesting
Seit 2023 unterstützen alle modernen Browser natives CSS Nesting. Sie können Regeln direkt ineinander verschachteln, was den Code lesbarer und wartbarer macht.
Das Problem ohne Nesting
Ohne Nesting muss jede Regel den vollständigen Selektor wiederholen:
.card { border-radius: 1rem; } .card img { width: 100%; } .card:hover { outline: 2px solid gold; } .card p { opacity: 0; } .card p.open { opacity: 1; }
Die Lösung mit Nesting
Mit Nesting schreibt man alle zusammengehörenden Regeln in einen einzigen Block:
.card { border-radius: 1rem; img { width: 100%; /* wird zu: .card img */ } &:hover { outline: 2px solid gold; /* wird zu: .card:hover */ } p { opacity: 0; /* wird zu: .card p */ &.open { opacity: 1; /* wird zu: .card p.sichtbar */ } } }
Das & (Ampersand)
Das & verweist immer auf den übergeordneten Selektor. Es ist zwingend, wenn die verschachtelte Regel direkt am Elternselektor angehängt werden soll – zum Beispiel bei Pseudo-Klassen oder zusätzlichen Klassen:
| Verschachtelung | Kompiliert zu | Wann nötig |
|---|---|---|
.card { img { } } | .card img | Kindelement (kein & nötig) |
.card { &:hover { } } | .card:hover | Pseudo-Klasse am Elternelement |
.card { &.aktiv { } } | .card.active | Zusätzliche Klasse am Elternelement |
p { &.offen { } } | p.open | Zusätzliche Klasse am Elternelement |
Praktisches Beispiel aus dem Projekt
Im Holiday-Explorer-Projekt wird Nesting verwendet, um die Beschreibung einer Kachel im geschlossenen und geöffneten Zustand zu stylen:
.text-wrapper { margin-top: auto; padding: 1.5rem; p { height: 0; opacity: 0; transition: all 300ms ease-in; /* wird zu: .text-wrapper p */ &.open { height: auto; opacity: 1; /* wird zu: .text-wrapper p.open */ } } }