協助挑選 CSS 巢狀結構的語法

兩種互相競爭的語法需要您協助，以決定哪些語法應優先考慮特定的規格候選。

Adam Argyle
Adam Argyle
X GitHub
Miriam Suzanne
Miriam Suzanne
X

CSS 巢狀結構是一種便利的語法，可將 CSS 新增至規則集。如果您使用了 SCSS、較小或觸控筆，那麼您大多已看過下列幾種變種版本：

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

預先處理工具編譯至一般 CSS 後，隨即變成標準 CSS，如下所示：

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

我們十分重視這個語法的官方 CSS 版本，因此我們偏好透過社群協助打破這項語法。本文的其餘部分將介紹語法選項，讓您在最後填寫問卷調查。

為什麼上方所示的巢狀結構示例無法採用 CSS 巢狀結構的語法？

最常見的巢狀語法無法在下列情況下使用：

  1. 剖析不明確
    部分巢狀選取器可能看起來與屬性和預先處理工具完全相同，可以在建構期間解析及管理這些選取器。瀏覽器引擎有不同的用途，選取條件一律無需鬆散。

  2. 預先處理器剖析衝突
    CSS 巢狀結構不應破壞預先處理器或現有的開發人員巢狀工作流程。這會造成乾擾，並會將這些生態系統和社群列入考量。

  3. 等待 :is()
    基本巢狀結構不需使用 :is()，但較為複雜的巢狀結構則不需要。如需選取器清單和巢狀結構的簡介，請參閱範例 3。假設選取器清單位於選取器中間而非開頭，這樣就必須使用 :is()，才能在另一個選取器的中間將選取器分組。

比較內容總覽

我們希望讓 CSS 以正確的巢狀方式運作，因此我們加入社群。以下各節將說明我們正在評估的三種可能版本。之後，我們會舉幾個例子來比較用途，最後便會填寫一份簡短的問卷調查，詢問你整體的偏好。

選項 1：@nest

這是 CSS 巢狀結構 1 目前指定的語法。透過使用 & 啟動新的巢狀選取器，這可讓您輕鬆地為附加樣式建立巢狀結構。該 API 也提供 @nest，方便您將 & 結構定義置於新選取器中的任何位置，例如不只是附加主旨。這是一種彈性和極少，但視用途而定，可能需要記住 @nest 或 &。

選項 2：@nest 受限

這是較為嚴格的替代做法，可降低記住兩種巢狀方法的費用。這項受限語法只允許在 @nest 之後建立巢狀結構，因此沒有簡單的附加便利模式。由於可移除的語意模糊不清，建立一個簡單好記的巢狀結構方法，但犧牲慣性。

方法 3：括號

為避免涉及 @nest 提案的雙語法或多餘的雜亂，Miriam Suzanne 和 Elika Etemad 提議改為依賴其他大括號的替代語法。如此可讓語法清楚明確，只有兩個額外字元，且沒有新的規則。它也允許依據所需的巢狀結構類型將巢狀規則分組，以便簡化多個類似巢狀結構的選取器。

範例 1 - 直接建立巢狀結構

@Nest

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

一律使用 @nest

.foo {
  color: #111;

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

括號

.foo {
  color: #111;

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

對等 CSS

.foo {
  color: #111;
}

.foo .bar {
  color: #eee;
}

範例 2 - 複合巢狀結構

@Nest

.foo {
  color: blue;

  &.bar {
    color: red;
  }
}

一律使用 @nest

.foo {
  color: blue;

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

括號

.foo {
  color: blue;

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

對等 CSS

.foo {
  color: blue;
}

.foo.bar {
  color: red;
}

範例 3 - 選取器清單和巢狀結構

@Nest

.foo, .bar {
  color: blue;

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

一律使用 @nest

.foo, .bar {
  color: blue;

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

括號

.foo, .bar {
  color: blue;

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

對等 CSS

.foo, .bar {
  color: blue;
}

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

範例 4 - 多層級

@Nest

figure {
  margin: 0;

  & > figcaption {
    background: lightgray;

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

一律使用 @nest

figure {
  margin: 0;

  @nest & > figcaption {
    background: lightgray;

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

括號

figure {
  margin: 0;

  {
    & > figcaption {
      background: lightgray;

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

對等 CSS

figure {
  margin: 0;
}

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

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

範例 5：父項巢狀或主體有所變更

@Nest

.foo {
  color: red;

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

一律使用 @nest

.foo {
  color: red;

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

括號

.foo {
  color: red;

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

對等 CSS

.foo {
  color: red;
}

.parent .foo {
  color: blue;
}

範例 6 - 混合直接和父項巢狀結構

@Nest

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    &.baz {
      color: green;
    }
  }
}

一律使用 @nest

.foo {
  color: blue;

  @nest .bar & {
    color: red;

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

括號

.foo {
  color: blue;

  {
    .bar & {
      color: red;

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

對等 CSS

.foo {
  color: blue;
}

.bar .foo {
  color: red;
}

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

範例 7 - 媒體查詢巢狀結構

@Nest

.foo {
  display: grid;

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

或明確 / 擴充

.foo {
  display: grid;

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

@nest (一律為煽情露骨內容)

.foo {
  display: grid;

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

括號

.foo {
  display: grid;

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

或明確 / 擴充

.foo {
  display: grid;

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

對等 CSS

.foo {
  display: grid;
}

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

範例 8 - 巢狀群組

@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

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

括號

fieldset {
  border-radius: 10px;

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

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

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

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

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

範例 9 - 複雜的巢狀群組「Kitchen Sink」

@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

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

括號

dialog {
  border: none;

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

    & > form {
      display: grid;

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

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

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

投票時間

希望您在評估語法選項時能覺得如此公平地比較，以及使用範例拼盤。請詳閱這些條款，並在下面說明您偏好的方式。感謝您協助我們推進 CSS 巢狀結構，成為大家都會認識並喜愛的語法！

參加問卷調查！