Depois que realizamos a pesquisa anterior para ajudar a escolher a sintaxe para o aninhamento do CSS, o grupo de trabalho do CSS continuou o debate sobre a melhor maneira de definir o aninhamento no CSS. Durante as discussões, foram sugeridas novas ideias de sintaxe. Para ajudar o grupo de trabalho a escolher entre qualquer uma dessas sintaxes, lançamos uma nova pesquisa.
Opções
Com base nos resultados da pesquisa anterior, as opções um e dois não estão mais sendo consideradas. Duas novas opções (quatro e cinco) foram adicionadas.
Opção 5: contêiner de aninhamento de nível superior
Introdução de uma regra @nest de nível superior que contém um bloco & { … } com declarações e várias regras de estilo aninhadas.
@nest selector {
& {
property: value;
}
nested-selector {
property: value;
}
}
Opção 4: proposta Postfix
Um bloco de código extra contendo as regras aninhadas é inserido após a regra principal que contém as declarações.
selector {
property: value;
} {
nested-selector {
property: value;
}
}
Opção 3: proposta de início sem letras
Cada regra aninhada deve ser inequívoca por si só, exigindo que ela comece com um não símbolo. É possível programar & div ou :is(div) caso você precise iniciar um seletor com um seletor de tipo.
selector {
property: value;
& nested-selector {
property: value;
}
}
Embora os snippets acima sejam usados apenas para demonstrar os fundamentos de cada proposta, há muitos outros exemplos incluídos na nova pesquisa.
Participe da votação
Para votar, acesse https://webkit.org/blog/13607/ (link em inglês). Não é necessário se inscrever para votar. Escolha "Opção 5", "Opção 4" ou "Opção 3" e clique em "Enviar".