W3C: CSS Nesting Module zum Gruppieren von Stilregeln ist in Arbeit

Das World Wide Web Consortium (W3C) hat den ersten Arbeitsentwurf für ein neues Modul zum Verschachteln von Stilregeln veröffentlicht (CSS Nesting Module). Im aktuellen Stadium als First Public Working Draft ist noch offen, ob das Konsortium das Modul final absegnen und in die CSS-Spezifikationen aufnehmen wird. Die Cascading Style Sheets (CSS) verfügen bei der Organisation über eine eigene Arbeitsgruppe (CSS Working Group), die den Vorschlag eingebracht hat und nun weiter ausarbeitet.

Gruppierte Stilregeln für lesbarere Cascading Style Sheets

Motivation für den Vorstoß ist die bislang notwendige Wiederholung von Stil-bezogenen Inhalten. Die Duplikate machen die CSS-Stylesheets laut Working Group unübersichtlich und recht aufwendig in der Wartung. Die angedachte Nesting-Möglichkeit soll es Entwicklerinnen und Entwicklern erlauben, miteinander verwandte Stilregeln zu gruppieren. Dadurch werden die Stylesheets laut Verfassern des Working Draft lesbarer und lassen sich leichter warten.

Beispielsweise ließe sich folgendes CSS-Mark-up auch kompakter darstellen:

table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

Das Nesting beziehungsweise Verschachteln würde die Stilregeln gruppieren und dadurch übersichtlicher machen:

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

Die "eingenisteten" Stilregeln verhalten sich dem Working Draft zufolge wie gewöhnliche Stilregeln, indem sie Elementen Eigenschaften durch Selektoren zuweisen. Allerdings übernehmen sie den Kontext des übergeordneten Selektors (Parent Rule) und können auf dem Elternselektor aufbauen – ohne überflüssige Wiederholungen. Bei der Syntax sind zurzeit ein direktes Nesting und eine @nest-Regel geplant. Eine so ausgezeichnete Regel ist jeweils nur innerhalb einer bestimmten Stilregel gültig, in anderen Kontexten verliert sie ihre Gültigkeit.

Gleichwertige Methoden: @nest-Regel und direktes Nesting

Beim direkten Verschachteln hingegen schreiben Entwickler die einzubettende Stilregel in die Elternregel hinein, wobei der Selektor dieser "eingenisteten" Regel als Präfix zu kennzeichnen wäre (nest-prefixed). Im Wortlaut des Working Draft heißt das: "Ein Nesting-Selektor muss der erste einfache Selektor im ersten zusammengesetzten Selektor des Selektors sein. Besteht der Selektor aus einer Liste von Selektoren, muss jeder komplexe Selektor der Liste "nest-fixed" sein, damit der gesamte (zusammengesetzte) Selektor "nest-fixed" ist." (§ 2.1 Direct Nesting)

Das klingt kompliziert, als CSS-Code schaut es für gültige Nestings wie folgt aus:

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent�s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Beide Methoden, das direkte Nesting und das begrenzte Verschachteln mit der @nest-Regel, sind hinsichtlich ihrer Funktionalität gleichwertig. Dass es zwei Regeln braucht, liegt laut Draft daran, dass nicht alles auf direktem Wege verschachtelbar ist.

Details und Vorbehalte zum Nesting-Modul

Der Arbeitsentwurf geht noch weiter ins Detail und führt neben Ausnahmen und Fallbeispielen, bedingten Regeln und einzelnen Selektoren auch das genaue Regelwerk der Spezifikation an, in die das angedachte Modul einzubetten wäre. Die offizielle Einführung des Nesting-Moduls würde auch andere Spezifikationen betreffen, die entsprechend anzupassen wären. So müssten offenbar die Grundlagen für Selectors Level 4 und ein Dokument namens CSS 2.1 (Cascading Style Sheets Level 2 Revision 1) überarbeitet werden.

Das Erweitern von Erweiterungen gilt als heikel, da Änderungen es schon über einen längeren Zeitraum hinweg nicht mehr in den offiziellen Standard geschafft haben. Deshalb herrscht laut CSS Working Group ein gewisser Wildwuchs, und Entwicklungsteams sind behelfsmäßig auf sogenannte Snapshot-Seiten angewiesen, die das aktuell Gültige zusammentragen. Zusätzlich wären alle Änderungen auch in das Folgedokument CSS 2.2 zu übertragen (gemeint ist die zweite revidierte Fassung von Cascading Style Sheets Level 2).

Lesen Sie auch

W3C: 25 Jahre World Wide Web Consortium

Work in Progress: Weiterführendes beim W3C

Wer sich eingehender damit auseinandersetzen möchte, findet am Ende des Working Draft auch einen Index mit der spezifizierten Terminologie sowie verlinkte Referenzen. Zurzeit gilt der Entwurf vom 31. August 2021 als Stand der Dinge, allerdings werden laut Präambel künftige Versionen diesen Stand ablösen. Wer zu dem Thema auf dem Laufenden bleiben mag, kann sich bei der W3C auf die entsprechenden Mailinglisten setzen.

(sih)