Nesting (Verschachtelung)

CSS Nesting: Verschachtelte Selektoren

Vorher (ohne Nesting):

.card { padding: 16px; }
.card h2 { font-size: 1.25rem; }
.card p { color: gray; }
.card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

Mit modernem CSS Nesting:

.card {
  padding: 16px;

  h2 {
    font-size: 1.25rem;
  }

  p {
    color: gray;
  }

  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

Das & steht für “das aktuelle Element selbst” (hier: .card).

Nesting: Vor- und Nachteile