CSS ネストの構文の選択に関するヘルプ

ブラマス
Adam Argyle 氏
Adam Argyle
Twitter GitHub

CSS ネストの構文の選択に関する前回のアンケートを実施した後、CSS ワーキング グループは、CSS でネストを定義する最適な方法についての議論を続けました。その中で、新しい構文のアイデアが提案されました。ワーキング グループでこれらの構文のいずれかを選択しやすくするために、新しいアンケートを用意しました。

選択肢

前回の調査結果から、選択肢 1 と 2 は今後考慮されなくなります。新しいオプション（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」を選択して [送信]をクリックします。

ぜひ投票してください。