Depois de realizarmos a pesquisa anterior para ajudar a escolher a sintaxe de aninhamento do CSS, o Grupo de Trabalho do CSS continuou debatendo a melhor maneira de definir o aninhamento no CSS. Durante as discussões, novas ideias de sintaxe foram sugeridas. Para ajudar o Grupo de Trabalho a escolher entre qualquer uma dessas sintaxes, há uma nova pesquisa.
As opções
Com base nos resultados da pesquisa anterior, as opções 1 e 2 não serão mais consideradas. Duas novas opções (quatro e cinco) foram adicionadas.
Opção 5: contêiner de aninhamento de nível superior
Introduz 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 letra
Todas as regras aninhadas sejam inequívocas por conta própria, exigindo que comecem com um símbolo não usado. Você pode escrever & div ou :is(div) se precisar 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 conceitos básicos de cada proposta, há muitos outros exemplos incluídos na nova pesquisa.
Participe da votação
Para votar, acesse https://webkit.org/blog/13607/. Não é necessário se registrar para votar. Escolha "Opção 5", "Opção 4" ou "Opção 3" e clique em "Enviar".