您必須協助判斷哪些語法應納入規格候選人。
Adam Argyle
Miriam Suzanne
CSS 巢狀結構是便利的新增語法，可將 CSS 新增至規則集。如果您使用過 SCSS、較低或觸控筆，那麼您一定會看過以下幾個變種版本：
.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 巢狀結構的語法？
以下列舉幾個常見的巢狀語法無法使用的原因：
不明確剖析
部分巢狀選取器可以看起來與屬性和預先處理工具完全相同，可以在建構期間解析及管理這些選取器。瀏覽器引擎的預設用途不同，選取器也一律不需要鬆散解讀。預先處理工具剖析衝突
建立巢狀結構的 CSS 方法不應破壞預先處理工具或現有的開發人員巢狀工作流程。這對這些生態系統和社群會造成乾擾，並造成不便。正在等待
:is()
基本巢狀結構不需要使用:is()，但巢狀結構較為複雜。如需選取器清單和巢狀結構的簡介，請參閱範例 #3。想像一下，選取器清單位於選取器中間而非開頭，在這類情況下，您必須使用:is()，才能將選取器位於另一個選取器的中間。
比較重點
我們希望打造更妥善的 CSS 巢狀結構，因此也秉持著這項精神。以下各節將說明我們要評估的三個可能版本。接著，我們會說明幾個比較用途的使用範例，最後還會有一份簡單的問卷調查，詢問您整體偏好哪一個。
選項 1：@nest
這是 CSS Nesting 1 目前指定的語法。您可以利用 & 啟動新的巢狀選取器，輕鬆建立附加樣式。還提供 @nest 讓您將 & 結構定義放在新選取器內的任何位置，例如您不只有附加主體時。它具有彈性和最小的特性，但需要記住 @nest 或 & 時，視用途而定。
選項 2：@nest 受限制
這是更嚴格的替代方案，用於減少記住兩種巢狀方法的成本。這項受限制的語法僅允許建立巢狀結構的 @nest，因此沒有僅附加便利的模式。移除較少的選擇，建立簡單好記的巢狀結構，但犧牲掉一些特性，但較有利於慣例。
選項 3：括號
為了避免 @nest 提案出現雙重語法或過於雜亂，Miriam Suzanne 和 Elika Etemad 提議改為依賴其他大括號的替代語法。如此一來，語法更加清楚，只有兩個額外字元，而且沒有新的 at 規則。這也允許依所需的巢狀類型分組排列巢狀規則，藉此簡化多個類似的巢狀選取器。
範例 1 - 直接巢狀
@Nest
.foo {
color: #111;
& .bar {
color: #eee;
}
}
一律使用 @nest 登入
.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 登入
.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 登入
.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 登入
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 登入
.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 登入
.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 一律為 (一律明確)
.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 登入
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 - 複雜巢狀群組「廚房接收器」
@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 登入
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 巢狀結構，廣受大家熟悉且喜愛的語法！