Hilfe beim Auswählen einer Syntax für die CSS-Verschachtelung

Sie müssen entscheiden, welche der beiden konkurrierenden Syntaxen als Spezifikationskandidat ausgewählt werden soll.

Adam Argyle
Adam Argyle
X GitHub
Miriam Suzanne
Miriam Suzanne
X

Das CSS-Verschachteln ist eine praktische Syntaxerweiterung, mit der CSS in eine Regelsammlung eingefügt werden kann. Wenn Sie SCSS, Less oder Stylus verwendet haben, sind Ihnen diese Varianten mit Sicherheit schon einmal begegnet:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Nach der Kompilierung in reguläres CSS durch den Preprozessor sieht das so aus:

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Wir überlegen ernsthaft, eine offizielle CSS-Version dieser Syntax zu veröffentlichen. Die Community ist jedoch gespalten und wir möchten sie um Hilfe bitten, um eine Entscheidung zu treffen. Im Rest dieses Beitrags werden die Syntaxoptionen vorgestellt, damit Sie am Ende eine Umfrage durchführen können.

Warum kann das obige Beispiel für das Nesting nicht die Syntax für das CSS-Nesting sein?

Es gibt einige Gründe, warum die beliebteste Verschachtelungssyntax nicht unverändert verwendet werden kann:

  1. Mehrdeutiges Parsen
    Einige verschachtelte Auswahlen können genau wie Properties aussehen und können zur Laufzeit aufgelöst und verwaltet werden. Browser-Engines haben nicht dieselben Funktionen. Selektoren dürfen niemals frei interpretiert werden.

  2. Konflikte beim Präprozessor-Parsing
    Die CSS-Verschachtelung sollte keine Probleme mit Präprozessoren oder vorhandenen Entwickler-Verschachtelungsworkflows verursachen. Das wäre für diese Ökosysteme und Gemeinden störend und rücksichtslos.

  3. Warten auf :is()
    Für einfache Verschachtelungen ist :is() nicht erforderlich, für komplexere Verschachtelungen jedoch schon. Beispiel 3 bietet eine kurze Einführung in Auswahllisten und Verschachtelung. Angenommen, die Auswahlliste befindet sich in der Mitte eines Selektors und nicht am Anfang. In diesen Fällen ist :is() erforderlich, um die Selektoren in der Mitte eines anderen Selektors zu gruppieren.

Vergleichsübersicht

Wir möchten das CSS-Verschachteln richtig hinbekommen und möchten die Community dabei mit einbeziehen. In den folgenden Abschnitten werden die drei möglichen Versionen beschrieben, die wir evaluieren. Anschließend sehen wir uns einige Beispiele zur Verwendung an und am Ende gibt es eine kurze Umfrage, in der Sie uns mitteilen können, welche Variante Ihnen insgesamt am besten gefallen hat.

Option 1: @nest

Dies ist die derzeit in CSS-Verschachtelung 1 angegebene Syntax. Es bietet eine praktische Möglichkeit, angefügte Stile zu verschachteln, indem neue verschachtelte Auswahlen mit & beginnen. Außerdem bietet es die Möglichkeit, den &-Kontext mit @nest an einer beliebigen Stelle in einer neuen Auswahl zu platzieren, z. B. wenn Sie nicht nur Themen anhängen. Sie ist flexibel und minimal, aber Sie müssen sich je nach Anwendungsfall @nest oder & merken.

Option 2: @nest eingeschränkt

Dies ist eine strengere Alternative, um die oben erwähnten Kosten zu reduzieren, die durch das Erinnern an zwei Verschachtelungsmethoden entstehen. Bei dieser eingeschränkten Syntax ist das Verschachteln nur nach @nest zulässig. Es gibt also kein praktisches Muster, das nur zum Anhängen dient. Die Mehrdeutigkeit der Auswahl wird beseitigt, es wird eine leicht zu merkende Verschachtelung geschaffen, aber die Kürze wird zugunsten der Konvention geopfert.

Option 3: Klammern

Um die doppelte Syntax oder die zusätzliche Unübersichtlichkeit der @nest-Vorschläge zu vermeiden, schlugen Miriam Suzanne und Elika Etemad eine alternative Syntax vor, die stattdessen auf zusätzliche geschweifte Klammern setzt. Dies sorgt für eine klarere Syntax mit nur zwei zusätzlichen Zeichen und ohne neue At-Rules. Außerdem können verschachtelte Regeln nach der Art der Verschachtelung gruppiert werden, um mehrere ähnlich verschachtelte Auswähltelemente zu vereinfachen.

Beispiel 1 – Direktes Verschachteln

@nest

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

@nest immer

.foo {
  color: #111;

  @nest & .bar {
    color: #eee;
  }
}

Klammern

.foo {
  color: #111;

  {
    & .bar {
      color: #eee;
    }
  }
}

Äquivalentes CSS

.foo {
  color: #111;
}

.foo .bar {
  color: #eee;
}

Beispiel 2: Verschachtelte Elemente

@nest

.foo {
  color: blue;

  &.bar {
    color: red;
  }
}

@nest immer

.foo {
  color: blue;

  @nest &.bar {
    color: red;
  }
}

Klammern

.foo {
  color: blue;

  {
    &.bar {
      color: red;
    }
  }
}

Äquivalentes CSS

.foo {
  color: blue;
}

.foo.bar {
  color: red;
}

Beispiel 3: Auswahllisten und Verschachtelung

@nest

.foo, .bar {
  color: blue;

  & + .baz,
  &.qux {
    color: red;
  }
}

@nest immer

.foo, .bar {
  color: blue;

  @nest & + .baz,
  &.qux {
    color: red;
  }
}

Klammern

.foo, .bar {
  color: blue;

  {
    & + .baz,
    &.qux {
      color: red;
    }
  }
}

Äquivalentes CSS

.foo, .bar {
  color: blue;
}

:is(.foo, .bar) + .baz,
:is(.foo, .bar).qux {
  color: red;
}

Beispiel 4: Mehrere Ebenen

@nest

figure {
  margin: 0;

  & > figcaption {
    background: lightgray;

    & > p {
      font-size: .9rem;
    }
  }
}

@nest immer

figure {
  margin: 0;

  @nest & > figcaption {
    background: lightgray;

    @nest & > p {
      font-size: .9rem;
    }
  }
}

Klammern

figure {
  margin: 0;

  {
    & > figcaption {
      background: lightgray;

      {
        & > p {
          font-size: .9rem;
        }
      }
    }
  }
}

Äquivalentes CSS

figure {
  margin: 0;
}

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

figure > figcaption > p {
  font-size: .9rem;
}

Beispiel 5: Verschachtelung von übergeordneten Elementen oder Änderung des Betreffs

@nest

.foo {
  color: red;

  @nest .parent & {
    color: blue;
  }
}

@nest immer

.foo {
  color: red;

  @nest .parent & {
    color: blue;
  }
}

Klammern

.foo {
  color: red;

  {
    .parent & {
      color: blue;
    }
  }
}

Äquivalentes CSS

.foo {
  color: red;
}

.parent .foo {
  color: blue;
}

Beispiel 6: Direkte und übergeordnete Verschachtelung kombinieren

@nest

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    &.baz {
      color: green;
    }
  }
}

@nest immer

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    @nest &.baz {
      color: green;
    }
  }
}

Klammern

.foo {
  color: blue;

  {
    .bar & {
      color: red;

      {
        &.baz {
          color: green;
        }
      }
    }
  }
}

Äquivalentes CSS

.foo {
  color: blue;
}

.bar .foo {
  color: red;
}

.bar .foo.baz {
  color: green;
}

Beispiel 7: Verschachtelung von Medienabfragen

@nest

.foo {
  display: grid;

  @media (width => 30em) {
    grid-auto-flow: column;
  }
}

oder explizit / erweitert

.foo {
  display: grid;

  @media (width => 30em) {
    & {
      grid-auto-flow: column;
    }
  }
}

@nest always (immer explizit)

.foo {
  display: grid;

  @media (width => 30em) {
    @nest & {
      grid-auto-flow: column;
    }
  }
}

Klammern

.foo {
  display: grid;

  @media (width => 30em) {
    grid-auto-flow: column;
  }
}

oder explizit / erweitert

.foo {
  display: grid;

  @media (width => 30em) {
    & {
      grid-auto-flow: column;
    }
  }
}

Äquivalentes CSS

.foo {
  display: grid;
}

@media (width => 30em) {
  .foo {
    grid-auto-flow: column;
  }
}

Beispiel 8: Verschachtelte Gruppen

@nest

fieldset {
  border-radius: 10px;

  &:focus-within {
    border-color: hotpink;
  }

  & > legend {
    font-size: .9em;
  }

  & > div {
    & + div {
      margin-block-start: 2ch;
    }

    & > label {
      line-height: 1.5;
    }
  }
}

@nest immer

fieldset {
  border-radius: 10px;

  @nest &:focus-within {
    border-color: hotpink;
  }

  @nest & > legend {
    font-size: .9em;
  }

  @nest & > div {
    @nest & + div {
      margin-block-start: 2ch;
    }

    @nest & > label {
      line-height: 1.5;
    }
  }
}

Klammern

fieldset {
  border-radius: 10px;

  {
    &:focus-within {
      border-color: hotpink;
    }
  }

  > {
    legend {
      font-size: .9em;
    }

    div {
      + div {
        margin-block-start: 2ch;
      }

      > label {
        line-height: 1.5;
      }
    }}
  }
}

Äquivalentes CSS

fieldset {
  border-radius: 10px;
}

fieldset:focus-within {
  border-color: hotpink;
}

fieldset > legend {
  font-size: .9em;
}

fieldset > div + div {
  margin-block-start: 2ch;
}

fieldset > div > label {
  line-height: 1.5;
}

Beispiel 9: Komplexe Verschachtelungsgruppe „Spülbecken“

@nest

dialog {
  border: none;

  &::backdrop {
    backdrop-filter: blur(25px);
  }

  & > form {
    display: grid;

    & > :is(header, footer) {
      align-items: flex-start;
    }
  }

  @nest html:has(&[open]) {
    overflow: hidden;
  }
}

@nest immer

dialog {
  border: none;

  @nest &::backdrop {
    backdrop-filter: blur(25px);
  }

  @nest & > form {
    display: grid;

    @nest & > :is(header, footer) {
      align-items: flex-start;
    }
  }

  @nest html:has(&[open]) {
    overflow: hidden;
  }
}

Klammern

dialog {
  border: none;

  {
    &::backdrop {
      backdrop-filter: blur(25px);
    }

    & > form {
      display: grid;

      {
        & > :is(header, footer) {
          align-items: flex-start;
        }
      }
    }
  }

  {
    html:has(&[open]) {
      overflow: hidden;
    }
  }
}

Äquivalentes CSS

dialog {
  border: none;
}

dialog::backdrop {
  backdrop-filter: blur(25px);
}

dialog > form {
  display: grid;
}

dialog > form > :is(header, footer) {
  align-items: flex-start;
}

html:has(dialog[open]) {
  overflow: hidden;
}

Zeit für die Abstimmung

Wir hoffen, dass Sie der Meinung sind, dass dies ein fairer Vergleich und eine gute Auswahl der Syntaxoptionen war, die wir derzeit bewerten. Bitte sehen Sie sich die Optionen an und teilen Sie uns unten mit, welche Sie bevorzugen. Vielen Dank, dass Sie uns dabei geholfen haben, die CSS-Verschachtelung zu einer Syntax zu entwickeln, die wir alle kennen und lieben werden.

Nimm an der Umfrage teil.