Geschachtelte CSS Regeln waren früher ein Anwendungsfall von CSS Präprozessoren. Aber nun schlägt das Imperium zurück!

Kennt ihr das? Ihr habt ein <div>, eine <figure>, eine <section>, oder was auch sonst, und darin jede Menge Zeugs. Die Styles für dieses Zeug sollen aber nur dann zutreffen, wenn sie gerade in diesem speziellen Elternelement stecken.

Also bekommt das Elternelement eine ID oder eine Klasse, und nun folgen siebenunddrölfzig CSS Regeln, die alle einen Selektor haben, der mit dieser ID oder dieser Klasse beginnt. Und dabei bleibt es natürlich nicht, es gibt weitere Schachtelungen, und irgendwann wird die Sache lästig.

Herbei, LESS oder SASS oder SCSS oder wie auch immer der CSS Präprozessor eures geringsten Misstrauens heißt, und ihr könnt Dinge formulieren wie

#foo {
   font-size: 1.1em;

   h2 {
      font-size: 2em;
      font-weight: bold;
      display: flex;
      justify-content: space-between;

      img {
          width: 30%;
      }
   }
}

Und wenn euch dieser #foo Bereich nicht interessiert, klickt ihr im Editor eures Vertrauens auf das Einklapp-Icon und alles ist ausgeblendet.

Und dafür müsst ihr in eurem Entwickler-Toolstack eine node.js-Instanz laufen lassen, die nach jedem Speichern eure .less-Dateien in .css Dateien konvertiert.

Das geht besser! Die CSS Nesting Spezifikation ist in den Browsern angekommen und erlaubt es euch, die gezeigte Schachtelung exakt so in nativem CSS zu schreiben. Naja, nicht ganz, Chromium-Browser haben noch Schwierigkeiten mit Elementselektoren und wollen davor den speziellen Schachtelungselektor & sehen. Der Firefox hat die aktuelle Fassung der Spezifikation schon besser drauf und braucht das & nicht.

Das & ist nur dann wichtig, wenn die Selektoren nicht stumpf von links nach rechts aneinandergehängt werden sollen, sondern wenn klargestellt werden muss, ob ein Nachfahrenkombinator (die Leerstelle) verwendet werden soll oder die Selektoren direkt zu einem verbundenen Selektor (z.B. p.foo als Verbund aus Element- und Klassenselektor) zusammengesetzt werden sollen.

Man kann sogar „falsch herum“ schachteln, wofür das & ebenfalls gebraucht wird:

p {
   padding: 0.5em 1em;

   aside > & {
      padding-inline: 0.5em;
   }
}

Hiermit bekommen p Elemente ein Block-Padding von 0.5em und ein Inline-Padding von 1em (ich rede hier von den logischen Eigenschaften), aber wenn das p Element direktes Kind eines aside ist, wird das Inline-Padding auf 0.5em reduziert.

Lest den ausführlichen Artikel zu CSS-Nesting im Selfhtml-Wiki!