LU13b - 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 */
        }
    }
}