帮助为 CSS 嵌套选择语法

两种相互竞争的语法需要您的帮助，以确定哪种语法应被选为规范候选对象。

Adam Argyle
Miriam Suzanne

CSS 嵌套是一种便捷的语法添加，允许在规则集中添加 CSS。如果您使用过 SCSS、Less 或 Stylus，那么您肯定见过以下几种变体：

.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 Nesting 1 中当前指定的语法。它提供了一种便捷的方式来嵌套附加样式，即以 & 开头创建新的嵌套选择器。它还提供 @nest，以便将 & 上下文放置在任何新选择器内，例如当您不仅要附加主题时。这种方式灵活且简洁，但需要记住 @nest 或 &，具体取决于您的使用场景。

选项 2：@nest restricted

这是一种更严格的替代方案，旨在减少记住两种嵌套方法的开销。此受限语法仅允许在 @nest 之后进行嵌套，因此没有仅追加的便捷模式。消除了选择的歧义，创建了一种易于记忆的嵌套方式，但牺牲了简洁性，转而采用惯例。

选项 3：括号

为了避免 @nest 提案中涉及的双重语法或额外杂乱，Miriam Suzanne 和 Elika Etemad 提出了替代语法，该语法依赖于额外的花括号。这样一来，语法清晰明了，只需添加两个额外的字符，而无需使用新的 @ 规则。它还允许按所需的嵌套类型对嵌套规则进行分组，从而简化多个类似嵌套的选择器。

示例 1 - 直接嵌套

@nest

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

@nest always

.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 always

.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 always

.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 always

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 always

.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 always

.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 always（始终显式）

.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 always

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 always

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 嵌套推进到我们都将熟悉并喜爱的语法！

参与调查！