Guida alla scelta della sintassi per la nidificazione dei CSS

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

Le 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 contenente un blocco & { … } con dichiarazioni e più regole di stile nidificate.

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

Opzione 4: proposta di 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 di inizio non con lettera

Ogni regola nidificata deve essere non ambigua da sola, richiedendo che inizi con un carattere diverso da un simbolo. Puoi scrivere & div o :is(div) se devi iniziare un selettore con un selettore di tipo.

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

Sebbene gli snippet riportati sopra vengano utilizzati solo per dimostrare le nozioni di base di ogni proposta, insieme al nuovo sondaggio sono inclusi molti altri esempi.

Vota

Per esprimere il tuo voto, visita la pagina https://webkit.org/blog/13607/. Il voto non richiede registrazione. Scegli "Opzione 5", "Opzione 4" o "Opzione 3" e fai clic su Invia.

Vota!