Pomoc dotycząca wyboru składni do zagnieżdżania CSS

Dwie konkurujące składni wymagają Twojej pomocy w określeniu, która z nich powinna być reprezentowana przez specyfikację.

Adam Argyle

Twitter GitHub

Miriam Suzanne

Twitter

Zagnieżdżanie CSS to wygodny dodatek do składni umożliwiający dodawanie kodu CSS wewnątrz zestawu reguł. Na pewno znasz kilka funkcji takich jak SCSS, Mniej lub Stylus:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Po skompilowaniu przez osobę przetwarzającą do zwykłego kodu CSS w taki sposób:

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Oficjalna wersja CSS tej składni jest bardzo ważna. Podzieliliśmy ją na dostęp do pomocy społeczności. W pozostałej części tego posta przedstawimy opcje składni, dzięki którym będzie można łatwiej wypełnić ankietę.

Dlaczego dokładny przykład zagnieżdżania pokazany powyżej nie może być składnią zagnieżdżania CSS?

Jest kilka powodów, dla których najpopularniejszej składni zagnieżdżania nie można używać w takiej postaci:

1. Niejednoznaczna analiza
   Niektóre zagnieżdżone selektory mogą wyglądać tak samo jak właściwości, a procesory wstępne mogą je rozpoznawać i zarządzać nimi podczas tworzenia. Wyszukiwarki przeglądarek nie będą miały takich samych afordancji, więc selektory nie będą nigdy luźno interpretowane.
   

2. Konflikty analizy podczas wstępnego przetwarzania danych
   Zagnieżdżanie zagnieżdżania za pomocą CSS nie powinno powodować problemów z procesorami wstępnymi ani istniejącymi przepływami pracy programistycznym. Byłoby to uciążliwe i nie wziąć pod uwagę tych ekosystemów i społeczności.
   

3. Czekam na: :is()
   W przypadku podstawowego zagnieżdżania nie jest wymagana :is(), a bardziej złożonego zagnieżdżania już tak. W przykładzie 3 znajdziesz krótkie wprowadzenie do list selektorów i zagnieżdżania. Wyobraź sobie, że lista selektorów znajduje się w środku selektora, a nie na początku. W takich przypadkach do zgrupowania selektorów na środku innego selektora wymagana jest właściwość :is().
   

Omówienie porównywanych elementów

Chcemy prawidłowo zagnieżdżać zasoby CSS i dlatego angażujemy się w to społeczność. W sekcjach poniżej opisujemy 3 możliwe wersje, które obecnie sprawdzamy. Przedstawimy kilka przykładów użycia, a na koniec przeprowadzimy krótką ankietę z pytaniem, co preferujesz.

Opcja 1. @nest

To jest aktualnie określona składnia w zagnieżdżaniu CSS 1. Zapewnia on wygodny sposób zagnieżdżania stylów zagnieżdżonych przez tworzenie nowych zagnieżdżonych selektorów za pomocą elementu &. Umożliwia też @nest umieszczenie kontekstu & w dowolnym miejscu w nowym selektorze, np. gdy nie dodajesz tematów. Jest elastyczny i minimalny, ale wymaga zapamiętania @nest lub & – w zależności od konkretnego przypadku użycia.

Opcja 2. Ograniczony dostęp do @nest

Jest to bardziej rygorystyczna alternatywa, która pozwala ograniczyć koszty związane z zapamiętywaniem 2 metod zagnieżdżania. Ta ograniczona składnia umożliwia tylko zagnieżdżanie po @nest, więc nie ma wzorca dodawania dodatkowego. Usunięcie dwuznaczności wyboru i stworzenie jednego łatwego do zapamiętania sposobu zagnieżdżania, jednak warto poświęcać ton na rzecz konwencji.

Uwaga: warto zauważyć, że mniej ograniczona składnia @nest (opcja 1) może spowodować użycie linteru, aby wyegzekwować regułę użytkowania w całym zespole na wypadek, gdyby zespół razem uznał, że nie podoba im się niejasność czy zwięzłość. Zmiana specyfikacji może być środkiem ekstremalnym.

Opcja 3: Nawiasy

Aby uniknąć podwójnego składni i niepotrzebnych informacji w ofertach firmy @nest, Miriam Suzanne i Elika Etemad zaproponowały alternatywną składnię, która opiera się na dodatkowych nawiasach klamrowych. Zwiększa to przejrzystość składni dzięki tylko 2 dodatkowym znakom i brakowi nowych reguł. Umożliwia też grupowanie reguł zagnieżdżonych według wymaganego typu zagnieżdżania, co upraszcza wiele podobnie zagnieżdżonych selektorów.

Przykład 1. Zagnieżdżanie bezpośrednie

@Nest

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

@nest zawsze

.foo {
  color: #111;

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

nawiasy

.foo {
  color: #111;

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

Odpowiednik w CSS

.foo {
  color: #111;
}

.foo .bar {
  color: #eee;
}

Przykład 2. Zagnieżdżanie złożone

@Nest

.foo {
  color: blue;

  &.bar {
    color: red;
  }
}

@nest zawsze

.foo {
  color: blue;

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

nawiasy

.foo {
  color: blue;

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

Odpowiednik w CSS

.foo {
  color: blue;
}

.foo.bar {
  color: red;
}

Przykład 3. Listy selektorów i zagnieżdżanie

@Nest

.foo, .bar {
  color: blue;

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

@nest zawsze

.foo, .bar {
  color: blue;

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

nawiasy

.foo, .bar {
  color: blue;

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

Odpowiednik w CSS

.foo, .bar {
  color: blue;
}

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

Przykład 4 – wiele poziomów

@Nest

figure {
  margin: 0;

  & > figcaption {
    background: lightgray;

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

@nest zawsze

figure {
  margin: 0;

  @nest & > figcaption {
    background: lightgray;

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

nawiasy

figure {
  margin: 0;

  {
    & > figcaption {
      background: lightgray;

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

Odpowiednik w CSS

figure {
  margin: 0;
}

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

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

Przykład 5 – zagnieżdżenie lub zmiana tematu

@Nest

.foo {
  color: red;

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

@nest zawsze

.foo {
  color: red;

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

nawiasy

.foo {
  color: red;

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

Odpowiednik w CSS

.foo {
  color: red;
}

.parent .foo {
  color: blue;
}

Przykład 6. Łączenie zagnieżdżenia bezpośredniego i nadrzędnego

@Nest

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    &.baz {
      color: green;
    }
  }
}

@nest zawsze

.foo {
  color: blue;

  @nest .bar & {
    color: red;

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

nawiasy

.foo {
  color: blue;

  {
    .bar & {
      color: red;

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

Odpowiednik w CSS

.foo {
  color: blue;
}

.bar .foo {
  color: red;
}

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

Przykład 7. Zagnieżdżanie zapytań o multimedia

@Nest

.foo {
  display: grid;

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

lub bezpośrednio / rozszerzone

.foo {
  display: grid;

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

@nest zawsze (jest zawsze jednoznacznie używany)

.foo {
  display: grid;

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

nawiasy

.foo {
  display: grid;

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

lub bezpośrednio / rozszerzone

.foo {
  display: grid;

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

Odpowiednik w CSS

.foo {
  display: grid;
}

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

Uwaga: istnieje wygodna składnia nazywana zagnieżdżaniem niejawnym. W pierwszych i pierwszych przykładach w każdym przykładzie pokazano funkcję zagnieżdżania, w której zakres reguł stylu jest stosowany do zakresu niejawnego selektora, w którym są zagnieżdżone. Zagnieżdżanie zagnieżdżone wymaga dostosowania, gdy musi istnieć więcej niż 1 selektor zagnieżdżony. W takim przypadku musisz przeprowadzić refaktoryzację, aby uzyskać jawny styl zagnieżdżania.

Przykład 8 – grupy zagnieżdżone

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

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

nawiasy

fieldset {
  border-radius: 10px;

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

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

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

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

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

Przykład 9. Złożona grupa zagnieżdżenia „Zlew”

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

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

nawiasy

dialog {
  border: none;

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

    & > form {
      display: grid;

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

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

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

Czas głosowania

Mamy nadzieję, że to rzetelne porównanie z przykładami ocenianych przez nas opcji składni. Zapoznaj się z nimi i daj nam znać, który z nich wybierasz poniżej. Dziękujemy za pomoc w rozwijaniu zagnieżdżania CSS do składni, którą wszyscy poznamy i polubimy.

Wypełnij ankietę