Was ist CSS Nesting?
CSS-Nesting ist eine Funktion in der Cascading Style Sheets (CSS)-Sprache, die es Entwicklern ermöglicht, verschachtelte Strukturen in ihrem Stylesheet-Code zu erstellen. Mit CSS-Nesting können Sie die Lesbarkeit und Organisiertheit Ihres Codes verbessern, indem Sie Regeln für verschachtelte Elemente in einer hierarchischen Struktur definieren. Ganz neu ist das nicht, nesting gab es doch schon eine Zeit lang in Sass.
Du bist eher der Video Typ?
Dann schau dir doch das YouTube Video dazu an!
Beispiele
Während wir früher mehrere descendant selector verwenden mussten, sah das Ganze so aus:
.container div {
padding: 10px;
}
.container .pie {
background-color: palevioletred;
}
Können wir das Ganze nun viel schöner mit CSS-Nesting abbilden.
.container {
div {
padding: 10px;
}
.pie {
background-color: palevioletred;
}
}
Just in case: Der descendant selector klingt zwar fancy, ist aber einfach der Selektor, bei dem Elemente durch Leerzeichen verbunden werden.
Kann ich das schon nutzen?
Grundsätzlich ist das Nesting in neuen Chrome-Versionen möglich. In einigen anderen Browsern müssen wir jedoch den Nesting-Operator verwenden. Genauer gesagt betrifft dies Edge und Opera. Allerdings werden auch diese sehr bald Nesting ohne den Operator unterstützen. Aktuelle Verfübgarkeit
Nesting Operator?
.container {
& div {
padding: 10px;
}
& .pie {
background-color: palevioletred;
}
}
Dazu setzen Sie einfach vor dem verschachtelten Kind-Element ein ‘&’ Zeichen. Diese Methode wird natürllich auch von Chrome unterstützt.
Den Spaß kann mann auch umdrehen
Der Nesting Operator kann auch angewendet werden, um den Kontext der Regeln umzukehren.
small {
p & {
color: red;
}
}
Das ist dann gleichzusetzen mit:
p small {
color: red;
}
Das gesamte kann auch noch kaskadieren:
small {
p & & & {
color: red;
}
}
Wenn wir dies erneut als descendant selector darstellen, sieht das folgendermaßen aus:
p small small small {
color: red;
}
Klingt vielleicht zunächst unnötig, aber stellen wir uns Folgendes vor: Wir haben einige Badges, die je nach übergeordnetem Element verändert werden sollen, jedoch teilen sich alle Badges gemeinsame Eigenschaften.
.badge {
border-radius: 5px;
padding: 10px;
p & {
color: red;
}
div {
color: blue;
}
}
Fazit
CSS hat sich in den letzten 12-16 Monaten unglaublich weiterentwickelt und wird immer komplexer, aber auch immer komfortabler. Ich denke, das ist eine sehr positive Entwicklung, und wir werden bald keine Frameworks mehr benötigen, da CSS nunmehr mächtig genug ist. All diese Neuerungen hätte ich mir bereits vor vielen Jahren gewünscht und musste damals mit Sass jonglieren. Das gehört ab jetzt der Zukunft an. Jetzt fehlt mir nur noch, dass JavaScript mit Features wie optionalem Typing nachzieht, aber das ist wieder ein anderes Thema.
