CSS-Nesting erlaubt es, Regeln ineinanderzuschreiben, statt den Selektor jedes Mal zu wiederholen. Seit 2023 geht das ohne Präprozessor.
- CSS-Nesting
Schreibweise, bei der eine Regel innerhalb einer anderen steht und deren Selektor fortsetzt.
Beispiel: „CSS-Nesting erspart es, den Selektor der Eltern zu wiederholen.“
Wie es aussieht
.karte {
padding: 1rem;
& .titel {
font-weight: 600;
}
&:hover {
border-color: #0078ff;
}
}Das kaufmännische Und steht für den äußeren Selektor. Browser unterstützen das seit 2023, vorher ging es nur mit einem Präprozessor.
Wo die Grenze liegt
Tiefe Verschachtelung erzeugt lange Selektoren und damit hohe Spezifität. Zwei Ebenen sind in der Regel genug; wer fünf braucht, hat meist ein Strukturproblem und nicht zu wenig Verschachtelung.