Was ist CSS Nesting?
CSS Nesting ermöglicht es uns, CSS Regeln innerhalb anderer Regeln zu schreiben. Dadurch wird unser Code übersichtlicher und leichter zu pflegen. Diese Funktion, die bisher nur über Präprozessoren wie SASS oder LESS verfügbar war, ist nun Teil der offiziellen CSS Spezifikation. Das bedeutet, dass wir jetzt eine tiefere und intuitivere Nesting von CSS Regeln direkt in unseren Stylesheets vornehmen können.
Beispiele:
Ohne Nesting:
1.navbar {
2/* Stil für die Navigationsleiste */
3}
4
5.navbar .navbar-link {
6/* Stil für Links in der Navigationsleiste */
7}
8
9.navbar .navbar-link:hover {
10/* Stil für Links bei Hover */
11}Mit Nesting:
1.navbar {
2/* Stil für die Navigationsleiste */
3
4 > .navbar-link {
5 /* Stil für Links */
6
7 &:hover {
8 /* Stil für Links bei Hover */
9 }
10 }
11}Was ist der Vorteil von CSS Nesting?
Wegen der Klarheit: Alles, was zu einem Element gehört, bleibt zusammen.
Wartbarkeit: Änderungen sind einfacher, da die Struktur klarer ist.
Weniger Schreibarbeit: Weniger Wiederholungen von Selektoren.
Hinweise:
Die Browserunterstützung variiert. Prüfe die Kompatibilität für das Projekte. Verwende diese Funktion mit Bedacht. Zu tiefes Nesting kann auch unübersichtlich werden.
Weitere Informationen:
