Help bij het kiezen van een syntaxis voor CSS-nesten

Twee concurrerende syntaxistypen hebben uw hulp nodig om te bepalen welke moet worden omgezet in een specificatiekandidaat.

Adam Argyle
Miriam Suzanne

CSS-nesting is een handige syntaxistoevoeging waarmee CSS binnen een regelset kan worden toegevoegd. Als je SCSS , Less of Stylus hebt gebruikt, dan heb je hier vast wel een paar varianten van gezien:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Nadat deze door de preprocessor naar gewone CSS is gecompileerd, wordt dit omgezet in gewone CSS, zoals dit:

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Er wordt serieus nagedacht over een officiële CSS-versie van deze syntaxis en we hebben een voorkeursverdeling. We willen graag de hulp van de community inschakelen om de strijd te winnen. De rest van dit bericht introduceert de syntaxisopties, zodat je je goed geïnformeerd kunt voelen en aan het einde een enquête kunt invullen.

Waarom kan het exacte nestingvoorbeeld hierboven niet de syntaxis voor CSS-nesting zijn?

Er zijn een paar redenen waarom de meest populaire nesting-syntaxis niet in de huidige staat gebruikt kan worden:

  1. Ambigue parsing
    Sommige geneste selectoren kunnen er precies zo uitzien als eigenschappen en preprocessors kunnen deze tijdens de build oplossen en beheren. Browser-engines hebben niet dezelfde mogelijkheden, selectoren hoeven nooit losjes te worden geïnterpreteerd.

  2. Conflicten bij het parseren van preprocessors
    De CSS-methode voor nesting zou geen preprocessors of bestaande geneste workflows voor ontwikkelaars mogen verstoren . Dit zou verstorend en onzorgvuldig zijn voor die ecosystemen en communities.

  3. Wachten op :is()
    Voor eenvoudige nesting is :is() niet nodig, maar voor complexere nesting wel. Zie voorbeeld 3 voor een korte introductie tot selectorlijsten en nesting. Stel dat de selectorlijst zich in het midden van een selector bevindt in plaats van aan het begin. In die gevallen :is() nodig om de selectors in het midden van een andere selector te groeperen.

Overzicht van wat we vergelijken

We willen CSS-nesting goed voor elkaar hebben, en in die geest betrekken we de community erbij. De volgende secties beschrijven de drie mogelijke versies die we evalueren. Vervolgens bespreken we enkele gebruiksvoorbeelden ter vergelijking, en aan het einde volgt een korte enquête waarin we je vragen welke versie je over het algemeen het beste vindt.

Optie 1: @nest

Dit is de huidige gespecificeerde syntaxis in CSS Nesting 1. Het biedt een handige manier om toevoegstijlen te nesten door nieuwe geneste selectoren te beginnen met & . Het biedt ook @nest als een manier om de & -context overal in een nieuwe selector te plaatsen, bijvoorbeeld wanneer je niet alleen onderwerpen toevoegt. Het is flexibel en minimaal, maar gaat ten koste van de noodzaak om @nest of & te onthouden, afhankelijk van je gebruiksscenario.

Optie 2: @nest beperkt

Dit is een strikter alternatief, in een poging de genoemde kosten voor het onthouden van twee nestmethoden te verlagen. Deze beperkte syntaxis staat alleen nesten toe na @nest , dus er is geen append-only gemakspatroon. De dubbelzinnigheid van de keuze wordt weggenomen en er ontstaat een gemakkelijk te onthouden manier om te nesten, maar de beknoptheid wordt opgeofferd ten gunste van de conventie.

Optie 3: Haakjes

Om de dubbele syntaxis of extra rommel die gepaard gaat met de @nest -voorstellen te vermijden, hebben Miriam Suzanne en Elika Etemad een alternatieve syntaxis voorgesteld die in plaats daarvan gebruikmaakt van extra accolades. Dit zorgt voor een duidelijke syntaxis, met slechts twee extra tekens en geen nieuwe at-regels. Het maakt het ook mogelijk om geneste regels te groeperen op basis van het gewenste type nesting, om zo het gebruik van meerdere, vergelijkbaar geneste selectoren te vereenvoudigen.

Voorbeeld 1 - Direct nesten

@nest 

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

@nest altijd 

.foo {
  color: #111;

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

haakjes 

.foo {
  color: #111;

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

Equivalente CSS 

.foo {
  color: #111;
}

.foo .bar {
  color: #eee;
}

Voorbeeld 2 - Samengestelde nesting

@nest 

.foo {
  color: blue;

  &.bar {
    color: red;
  }
}

@nest altijd 

.foo {
  color: blue;

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

haakjes 

.foo {
  color: blue;

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

Equivalente CSS 

.foo {
  color: blue;
}

.foo.bar {
  color: red;
}

Voorbeeld 3 - Selectorlijsten en nesting

@nest 

.foo, .bar {
  color: blue;

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

@nest altijd 

.foo, .bar {
  color: blue;

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

haakjes 

.foo, .bar {
  color: blue;

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

Equivalente CSS 

.foo, .bar {
  color: blue;
}

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

Voorbeeld 4 - Meerdere niveaus

@nest 

figure {
  margin: 0;

  & > figcaption {
    background: lightgray;

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

@nest altijd 

figure {
  margin: 0;

  @nest & > figcaption {
    background: lightgray;

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

haakjes 

figure {
  margin: 0;

  {
    & > figcaption {
      background: lightgray;

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

Equivalente CSS 

figure {
  margin: 0;
}

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

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

Voorbeeld 5 - Oudernesting of onderwerpverandering

@nest 

.foo {
  color: red;

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

@nest altijd 

.foo {
  color: red;

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

haakjes 

.foo {
  color: red;

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

Equivalente CSS 

.foo {
  color: red;
}

.parent .foo {
  color: blue;
}

Voorbeeld 6 - Mengen van directe en ouderlijke nesting

@nest 

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    &.baz {
      color: green;
    }
  }
}

@nest altijd 

.foo {
  color: blue;

  @nest .bar & {
    color: red;

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

haakjes 

.foo {
  color: blue;

  {
    .bar & {
      color: red;

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

Equivalente CSS 

.foo {
  color: blue;
}

.bar .foo {
  color: red;
}

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

Voorbeeld 7 - Nesten van media query's

@nest 

.foo {
  display: grid;

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

of expliciet / uitgebreid 

.foo {
  display: grid;

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

@nest altijd (is altijd expliciet) 

.foo {
  display: grid;

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

haakjes 

.foo {
  display: grid;

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

of expliciet / uitgebreid 

.foo {
  display: grid;

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

Equivalente CSS 

.foo {
  display: grid;
}

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

Voorbeeld 8 - Nestgroepen

@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 altijd 

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;
    }
  }
}

haakjes 

fieldset {
  border-radius: 10px;

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

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

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

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

Equivalente 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;
}

Voorbeeld 9 - Complexe nestgroep "Keukengootsteen"

@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 altijd 

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;
  }
}

haakjes 

dialog {
  border: none;

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

    & > form {
      display: grid;

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

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

Equivalente 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;
}

Tijd om te stemmen

Hopelijk vond je dit een eerlijke vergelijking en een voorbeeld van de syntaxisopties die we evalueren. Bekijk ze zorgvuldig en laat ons hieronder weten welke je voorkeur heeft. We stellen je hulp op prijs bij het verbeteren van CSS-nesting naar een syntaxis die we allemaal zullen leren kennen en waarderen!

Doe mee aan de enquête!