Después de ejecutar la encuesta anterior para ayudar a elegir la sintaxis del anidamiento de CSS, el grupo de trabajo de CSS continuó debatiendo sobre la mejor manera de definir el anidamiento en CSS. Durante las discusiones, se sugirieron nuevas ideas de sintaxis. Para ayudar al grupo de trabajo a elegir entre cualquiera de estas sintaxis, hay una nueva encuesta.
Las opciones
En función de los resultados de la encuesta anterior, ya no se consideran las opciones uno y dos. Se agregaron dos opciones nuevas (cuatro y cinco).
Opción 5: Contenedor de anidación de nivel superior
Presenta una regla @nest de nivel superior que contiene un bloque & { … } con declaraciones y varias reglas de estilo anidadas.
@nest selector {
& {
property: value;
}
nested-selector {
property: value;
}
}
Opción 4: Propuesta de postfijo
Se inserta un bloque de código adicional que contiene las reglas anidadas después de la regla principal que contiene las declaraciones.
selector {
property: value;
} {
nested-selector {
property: value;
}
}
Opción 3: Propuesta de inicio que no es una carta
Cada regla anidada debe ser inequívoca por sí sola, ya que debe comenzar con un símbolo que no sea un símbolo. Puedes escribir & div o :is(div) si necesitas iniciar un selector con un selector de tipo.
selector {
property: value;
& nested-selector {
property: value;
}
}
Si bien los fragmentos anteriores solo se usan para demostrar los conceptos básicos de cada propuesta, se incluyen muchos más ejemplos junto con la nueva encuesta.
Vota
Para emitir tu voto, ve a https://webkit.org/blog/13607/. No es necesario registrarse para votar. Elige “Opción 5”, “Opción 4” o “Opción 3” y haz clic en Enviar.