帮助选择 CSS 嵌套的语法

Bramus
Adam Argyle
Adam Argyle
X GitHub

在我们开展上次旨在帮助选择 CSS 嵌套语法的调查后，CSS 工作组继续就如何在 CSS 中定义嵌套的最佳方式展开辩论。在讨论过程中，我们提出了新的语法想法。为了帮助工作组从这些语法中进行选择，我们提供了一份新调查问卷。

选项

根据之前调查的结果，我们不再考虑选项 1 和 2。新增了两个选项（四和五）。

选项 5：顶级嵌套容器

引入了一个顶级 @nest 规则，其中包含包含声明和多个嵌套样式规则的 & { … } 代码块。

@nest selector {
  & {
    property: value;
  }
  nested-selector {
    property: value;
  }
}

选项 4：后缀建议

在包含声明的主规则后面插入一个包含嵌套规则的额外代码块。

selector {
  property: value;
} {
  nested-selector {
    property: value;
  }
}

方案 3：非字母开头的方案

要求每个嵌套规则都以非符号开头，以确保其本身不含歧义。如果您需要使用类型选择器开始选择器，可以写入 & div 或 :is(div)。

selector {
  property: value;
  & nested-selector {
    property: value;
  }
}

虽然上述代码段仅用于演示每个提案的基础知识，但新调查问卷中还包含更多示例。

请投票

如需进行投票，请访问 https://webkit.org/blog/13607/。无需注册即可投票，请选择“选项 5”“选项 4”或“选项 3”，然后点击“提交”。

投票！