Native CSS-Verschachtelung

Native CSS-Nesting (Baseline 2024, alle modernen Browser) ermöglicht es, CSS-Regeln innerhalb anderer Regeln zu schreiben, und bildet damit die Verschachtelungssyntax nach, die zuvor nur in den Präprozessoren Sass/Less verfügbar war. Verschachtelte Regeln übernehmen automatisch den Kontext des übergeordneten Selektors.

Schreiben Sie untergeordnete Selektoren innerhalb des Regelblocks eines übergeordneten Selektors. Der Browser kombiniert übergeordneten und untergeordneten Selektor automatisch. Ein & (Nesting-Selektor) verweist für Modifikatoren und Pseudo-Klassen explizit auf den übergeordneten Selektor.

& steht in verschachtelten Regeln explizit für den übergeordneten Selektor. Verwenden Sie es für Pseudo-Klassen (&:hover), Pseudo-Elemente (&::before), Modifier-Klassen (&.active) und Attributselektoren (&[disabled]). Ohne & erzeugen verschachtelte Regeln Nachfahrenselektoren.

Verschachteln Sie Regeln für Pseudo-Elemente direkt im übergeordneten Selektor: .button { &::before { content: ""; } &::after { content: ""; } }. So befinden sich alle Button-Stile am selben Ort, und die in flachem CSS erforderliche Wiederholung des Selektors entfällt.

Media Queries und andere At-Rules können innerhalb von Regeln verschachtelt werden (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Responsive Stile stehen so direkt bei dem Element, auf das sie wirken, statt in einem separaten Media-Query-Block am Ende der Datei.

Verschachtelung ändert nichts an den Regeln für Spezifität – der kombinierte Selektor hat dieselbe Spezifität, als wäre er flach geschrieben. .card .title hat verschachtelt und flach dieselbe Spezifität (0,2,0). Nesting ist eine syntaktische Vereinfachung, keine Änderung der Spezifität.

Ein verschachtelter Selektor ohne & erstellt einen Nachfahrenselektor: .card { .title {} } wird zu .card .title kompiliert. Mit &: .card { &.active {} } wird zu .card.active kompiliert (kein Leerzeichen – eine Modifier-Klasse, kein Nachfahre).

Native Verschachtelung eignet sich nicht ideal für BEM – die Selektoren .block__element und .block--modifier sind Zeichenfolgen, und Verschachtelung kann sie nicht allein mit & zusammensetzen. Verwenden Sie Nesting für Pseudo-Klassen und verschachtelte Komponentenstrukturen statt für die Verkettung von BEM-Zeichenfolgen (dafür ist weiterhin ein Präprozessor erforderlich).

Die meiste Sass-Nesting-Syntax ist mit der nativen CSS-Nesting-Syntax identisch. Ausnahmen: Sass erlaubt die Verkettung von Zeichenfolgen mit &-modifier (native CSS nicht). Migrieren Sie, indem Sie nach Mustern wie &- oder &__ suchen und diese spezifischen Regeln abflachen, während Sie die übrige Verschachtelung beibehalten.

Native CSS-Nesting wird von Chrome 112+, Firefox 117+ und Safari 16.5+ unterstützt. Für ältere Browser verwenden Sie PostCSS mit postcss-nesting, um die native Nesting-Syntax während des Builds in flaches CSS umzuwandeln – so können Sie bereits heute native Verschachtelung schreiben.

Chrome DevTools zeigt verschachtelte Regeln im Styles-Panel in ihrer verschachtelten Form an. Wenn Sie auf eine verschachtelte Regel klicken, springt DevTools im Sources-Panel zur richtigen Quellposition. Das Debugging von verschachteltem CSS ist in modernen DevTools genauso übersichtlich wie das von flachem CSS.

Was ist der Unterschied zwischen der Verschachtelung mit und ohne den &-Selektor?

Native CSS-Nesting ermöglicht eine Sass-ähnliche verschachtelte Syntax in reinem CSS. Der &-Selektor erstellt zusammengesetzte Selektoren für Pseudo-Klassen, Pseudo-Elemente und Modifikatoren. Verschachtelte @media-Queries platzieren responsive Stile direkt bei ihren Elementen. PostCSS wandelt native Verschachtelung für ältere Browser um und ermöglicht so die schrittweise Einführung bereits heute.