CSS-Nesting
Von: Charleen, Jonas CSS-Nesting hilft dabei den Code strukturierter, übersichtlicher und wartbarer zu schreiben, indem es verwandte Regeln innerhalb eines Selektors gruppiert. Ehemals CSS Präprozessoren wie Sass vorbehalten, erlaubt natives CSS heute ebenfalls Verschachtelung.
Lange Zeit war es notwendig, auf präprozessorbasierte Tools wie Sass zurückzugreifen, um verschachtelte CSS-Regeln schreiben zu können. Diese Technik vereinfachte die Strukturierung und Lesbarkeit von Stylesheets erheblich. Inzwischen unterstützen jedoch alle modernen Browser diese Funktionalität auch direkt im nativen CSS – ganz ohne zusätzliche Werkzeuge oder Build-Prozesse.
Was ist CSS-Nesting?
CSS-Nesting ist eine Technik, bei der CSS-Regeln hierarchisch innerhalb anderer CSS-Regeln verschachtelt werden, ähnlich den Media Queries. Diese Technik ist besonders bei komplexeren, verschachtelten HTML-Strukturen von Vorteil, da die verschiedenen Styles so nach dieser Struktur organisiert werden können und Redundanz vermieden wird.
Beispiel ohne Nesting, mit vollständig angegebenen Selektoren:
.container {
display: flex;
}
.container .item {
color: blue;
}Beispiel mit Nesting, verschachteln von untergeordnetem Selektor in Übergeordnetem:
.container {
display: flex;
.item {
color: blue;
}
}Die CSS Nesting-Syntax
Bei der Verwendung von CSS-Nesting können Selektoren innerhalb eines übergeordneten Selektors geschachtelt werden, allerdings gibt es Regeln und Besonderheiten bei der Syntax, die beachtet werden müssen.
Der & Selektor
Das & Zeichen steht als Platzhalter für den übergeordneten Selektor und wird für die direkte Referenzierung des Elternselektors verwendet. Es ist dann erforderlich, wenn Pseudoklassen wie :hover und :focus, oder Pseudoelemente wie ::before und ::after für den übergeordneten Selektor genutzt werden sollen. Dabei ist zu beachten, dass nach dem & kein Leerzeichen folgen darf.
/* Ohne nesting */
.button {
background: blue;
color: white;
}
.button:hover {
background: darkblue;
}
.button:focus {
outline: 2px solid white;
}
/* Mit nesting */
.button {
background: blue;
color: white;
&:hover {
background: darkblue;
}
&:focus {
outline: 2px solid white;
}
}Bei direkten Unterelementen eines Selektors kann ein & Zeichen mit einem Leerzeichen dahinter verwendet werden, dies ist aber nicht mehr notwendig.
Der > Kind-Selektor
Wenn nur direkte Kinder eines Selektors angesprochen werden sollen, wird auch im CSS-Nesting das > Zeichen verwendet. Dabei ist auf das Leerzeichen zu achten.
/* Ohne nesting */
.nav > .menu {
color: red;
}
/* Mit nesting */
.nav {
> .menu {
color: red;
}
}Die Geschwister-Selektoren
Um Geschwisterelemente gezielt zu stylen, können die CSS-Kombinatoren + (benachbarte Geschwister) und ~ (allgemeine Geschwister) innerhalb von verschachtelten Selektoren genutzt werden.
/* Ohne nesting: */
.article h2 + p {
margin-block-start: 1em;
color: gray;
}
/* Mit nesting: */
.article {
h2 {
+ p {
margin-block-start: 1em;
color: gray;
}
}
}
/* Das @ Prefix
CSS-Regeln, die mit einem @ beginnen, wie beispielsweise @font-face, @keyframes und @import, dürfen nicht innerhalb eines verschachtelten Elements stehen.
/* Nicht erlaubt */
.button {
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* Richtige Angabe */
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.button {
animation: fade .2s ease-in-out;
}CSS-Nesting & Media Queries
Mit CSS-Nesting können Media Queries direkt innerhalb eines Selektors platziert werden. Dadurch bleiben die Styles für verschiedene Bildschirmgrößen logisch zusammenhängend und der Code wird strukturierter und übersichtlicher.
/* Ohne Nesting */
.container {
display: flex;
gap: 2em;
}
@media (max-width: 600px) {
flex-direction: column;
}
/* Mit nesting */
.container {
display: flex;
gap: 2em;
@media (max-width: 600px) {
flex-direction: column;
}
}Auch zielgerichtete Anpassungen einzelner Elemente innerhalb einer Komponente sind möglich.
/* Innerhalb von .card bekommt .title ab einer Bildschirmbreite von 600px eine größere font-size. */
.card {
background: white;
padding: 1em;
.title {
font-size: 1.5em;
@media (min-width: 600px) {
font-size: 2em;
}
}
}Ebenfalls können mit CSS-Nesting verschiedene Media Queries innerhalb eines Selektors verschachtelt werden.
/* Das Padding von .card wird an verschiedenen Breakpoints größer */
.card {
padding: 1rem;
@media (min-width: 800px) {
padding: 1.5rem;
}
@media (min-width: 1200px) {
padding: 2rem;
}
}Media Queries durch Nesting in ihrer jeweiligen Komponente zu nutzen, kann den Code wartbarer und übersichtlicher machen. Falls eine Media Query jedoch für mehrere Komponenten gilt, ist es meist besser, sie außerhalb des Nestings zu definieren.
Best Practice – Geringe Verschachtelungstiefe
Einer der häufigsten Fehler beim Nutzen von CSS-Nesting ist eine zu tiefe Verschachtelung (Stichwort: Spezifität). Das ähnliche Problem besteht auch beim Einsatz von Präprozessoren wie Sass. Das führt zu schwer lesbarem Code und unnötig langen Selektoren, die die Performance und Wartbarkeit verschlechtern. Nesting sollte dementsprechend bewusst und nicht übermäßig tief verwendet werden. Auch CSS Methodologien können helfen.
/* Zu tief verschachteltes CSS */
.container {
display: flex;
justify-content: center;
.card {
background: white;
padding: 1em;
.title {
font-size: 2em;
&:hover {
color: red;
}
}
}
}
/* Besser verschachteltes CSS */
.container {
display: flex;
justify-content: center;
}
.card {
background: white;
padding: 20px;
.title {
font-size: 24px;
&:hover {
color: red;
}
}
}Browser Support
Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.
Geschrieben von:
Charleen Warkentin
