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

胸罩
亞當阿爾蓋爾
Adam Argyle
Twitter GitHub

Google 進行先前的問卷調查，協助選擇 CSS 巢狀結構的語法後，CSS 工作團隊會繼續討論在 CSS 中定義巢狀結構的最佳方式。討論期間，我們提出了新的語法構想。我們製作了一份新的問卷調查，以便協助工作小組選擇其中一種語法。

選項

根據上一次問卷調查的結果，我們不再考量選項一和兩個選項。新增兩個選項 (4 和 5)。

選項 5：頂層巢狀容器

導入頂層 @nest 規則，其中包含一個 & { … } 區塊，其中包含宣告和多個巢狀樣式規則。

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

選項 4：Postfix 提案

系統會在包含宣告的主要規則後方插入包含巢狀規則的額外程式碼區塊。

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」，然後點選「提交」。

投下您的一票！