CSS Nesting

CSS Nesting ermöglicht es, zusammengehörige CSS-Regeln ineinander zu schreiben. Selektoren müssen dadurch nicht ständig wiederholt werden. Die Syntax erinnert an SCSS oder Sass, wird aber direkt vom Browser verarbeitet.

Nesting verändert nicht das Ergebnis im Browser, sondern die Struktur des Stylesheets. Richtig eingesetzt macht es zusammengehörige Regeln leichter lesbar und wartbar.

---

Grundidee

Ohne Nesting

.card {
    padding: 1rem;
}

.card h2 {
    font-size: 1.5rem;
}

.card p {
    color: #555;
}

Mit Nesting

.card {
    padding: 1rem;

    h2 {
        font-size: 1.5rem;
    }

    p {
        color: #555;
    }
}

Die verschachtelten Selektoren h2 und p beziehen sich auf Elemente innerhalb von .card. Der Browser behandelt sie wie .card h2 und .card p.

---

Der &-Selektor

Das Zeichen & steht für den äusseren Selektor. Es wird benötigt, wenn zwischen dem äusseren und dem verschachtelten Selektor kein Leerzeichen entstehen soll.

button {
    background: blue;

    &:hover {
        background: darkblue;
    }
}

&:hover entspricht button:hover. Ohne & würde button :hover entstehen und damit ein Element innerhalb des Buttons ausgewählt.

---

Klassen kombinieren

Mit & lassen sich auch mehrere Klassen desselben Elements kombinieren.

.card {
    border: 2px solid transparent;

    &.active {
        border-color: green;
    }
}

&.active entspricht .card.active. Die Regel gilt für ein Element, das beide Klassen besitzt.

---

Kombinatoren

Ein verschachtelter Selektor kann direkt mit einem Kombinator beginnen. Das & ist in diesem Fall nicht erforderlich.

ul {
    > li {
        list-style: none;
    }
}

h2 {
    + p {
        margin-top: 0;
    }
}

• >wählt direkte Kindelemente aus
• +wählt das unmittelbar folgende Geschwisterelement aus
• ~wählt nachfolgende Geschwisterelemente aus

---

Unterschied zu Sass

Natives CSS Nesting kann Selektornamen nicht zusammensetzen. Das folgende Sass-Muster funktioniert deshalb nicht in CSS:

/* In nativem CSS ungültig */
.button {
    &--primary {
        background: blue;
    }
}

Die Klasse muss vollständig ausgeschrieben werden:

.button {
    padding: 1rem;
}

.button--primary {
    background: blue;
}

---

Nesting mit Abfragen

Media Queries können direkt in eine Regel verschachtelt werden. Die Deklarationen innerhalb der Abfrage gelten weiterhin für den äusseren Selektor.

.card {
    padding: 1rem;

    @media (min-width: 48rem) {
        padding: 2rem;
    }
}

Auf dieselbe Weise lassen sich auch @container und @supports innerhalb einer CSS-Regel verwenden.

---

Nesting lesbar halten

• Nesting nur verwenden, wenn Regeln wirklich zusammengehören.
• Nicht unnötig viele Ebenen ineinander verschachteln.
• Eigenschaften zuerst schreiben, danach die verschachtelten Regeln.
• Trotz Nesting prüfen, welche vollständigen Selektoren entstehen.

.card {
    /* Zuerst die Eigenschaften der Karte */
    padding: 1rem;
    background: white;

    /* Danach verschachtelte Regeln */
    h2 {
        font-size: 1.5rem;
    }
}

---

Browser-Kompatibilität

CSS Nesting wird von aktuellen Browsern unterstützt. Seit Ende 2023 steht die grundlegende Syntax browserübergreifend zur Verfügung. Für ältere Browser ist weiterhin nicht verschachteltes CSS erforderlich.

---

Kurz gesagt

• CSS Nesting gruppiert zusammengehörige Regeln innerhalb eines äusseren Selektors.
• Selektoren ohne & wählen Elemente innerhalb des äusseren Elements aus.
• & steht für den äusseren Selektor und verhindert ein zusätzliches Leerzeichen.
• Kombinatoren und Abfragen können ebenfalls verschachtelt werden.
• Sass-Muster wie &--primary funktionieren in nativem CSS nicht.
• Wenige, klar strukturierte Ebenen bleiben leichter verständlich.

---