Guida alla scelta della sintassi per la nidificazione dei CSS

Dopo aver eseguito il precedente sondaggio per scegliere la sintassi per la nidificazione dei CSS, il CSS Working Group ha continuato a discutere sul modo migliore per definire la nidificazione in CSS. Durante le discussioni sono state suggerite nuove idee per la sintassi. Per aiutare il gruppo di lavoro a scegliere tra queste sintassi, è stato introdotto un nuovo sondaggio.

Opzioni

In base ai risultati del sondaggio precedente, le opzioni 1 e 2 non vengono più prese in considerazione. Sono state aggiunte due nuove opzioni (quattro e cinque).

Opzione 5: contenitore nidificato di primo livello

Introduce una regola @nest di primo livello che contiene un blocco & { … } con dichiarazioni e più regole di stile nidificate.

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

Opzione 4: proposta Postfix

Un blocco di codice aggiuntivo contenente le regole nidificate viene inserito dopo la regola principale che contiene le dichiarazioni.

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

Opzione 3: proposta iniziale non scritta

Ogni regola nidificata deve essere indipendente e non ambigua, perché è necessario che inizi con un non simbolo. Puoi scrivere & div o :is(div) se devi avviare un selettore con un selettore del tipo.

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

Gli snippet riportati sopra vengono utilizzati solo per dimostrare le nozioni di base di ogni proposta, ma nel nuovo sondaggio sono inclusi molti altri esempi.

Vota

Per votare, vai a https://webkit.org/blog/13607/. Il voto non richiede alcuna registrazione, scegli “Opzione 5”, “Opzione 4” o “Opzione 3” e premi Invia.

Vota!