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

Bramus
Adam Argyle
Adam Argyle
X GitHub

在我們進行先前的問卷調查，協助選擇 CSS 巢狀結構的語法後，CSS 工作小組繼續討論在 CSS 中定義巢狀結構的最佳方式。在討論過程中，我們提出了新的語法構想。為了協助工作小組選擇上述任一語法，我們推出了新的問卷調查。

選項

根據先前問卷調查的結果，我們不再考慮選項一和二。新增了兩個選項 (四和五)。

選項 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」，然後按一下「提交」。

快來投票！