Recientemente, el W3C (World Wide Web Consortium) anunció una herramienta prometedora y que tiene expectantes a miles de desarrolladores en el mundo. Se trata de CSS Nesting Module o también conocido como selectores múltiples anidados, la cual busca facilitar el desarrollo de proyectos a gran escala y su mantenimiento en el tiempo. Cabe resaltar que el W3C es el consorcio internacional que busca establecer estándares, y armonizar las especificaciones para el desarrollo web. Dentro de este proceso participan grupos, universidades, instituciones políticas, empresas comerciales, etc.
¿Qué es CSS Nesting Module?
El “CSS Nesting Module” se encarga de anidar un selector dentro de otro selector. El anidamiento ayuda a agrupar estilos relacionados y escribir CSS en una jerarquía de código.
Actualmente esta herramienta se encuentra en estado “Editor’s Draft”. Esto significa que se trata de un trabajo en progreso con intenciones de ser estándar, pero que aún no está publicado para su revisión, esperando que el continuo aporte de los miembros involucrados, logre los requisitos técnicos suficientes para pasar a la siguiente etapa.
La propuesta presentada afecta directamente el desarrollo de CSS. Previamente, se han usado herramientas para mejorar el desarrollo del CSS como los preprocesadores de CSS (Sass, Stylus, Post CSS, entre otros). Lo anterior, en beneficio de facilitar el desarrollo de proyectos de gran escala y su mantenimiento en el tiempo.
La herramienta de selectores múltiples facilita en gran medida el desarrollo integrando reglas de estilo dentro de cada uno de los diseños. Con esto, podemos acceder a un selector especial que nos permite usar referencias de elementos de reglas de estilos externas, lo que nos ayuda a evitar código duplicado y generar archivos de estilos de gran tamaño.
table.colortable td {
text-align:center;
}
table.colortable td.c {
text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
border:1px solid black;
}
table.colortable th {
text-align:center;
background:black;
color:white;
}
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}
Este ejemplo demuestra que la redacción y mantenimiento del estilo mejoran con el uso de dicha regla. Sin embargo, traer esta especificación al CSS Estándar es un gran aporte y mejora de cara al futuro.
Reglas de estilo de anidamiento
1. (Anidamiento directo)
Una regla de estilo se puede anidar directamente dentro de otra regla de estilo si su selector tiene el prefijo anidado.
/* o en un selector compuesto,
refinando el selector de los padres /
.foo{
color:azul;
&.bar{ color:rojo; }
}
/ equivalente a
.foo {color: azul; }
.foo.bar { color: rojo; }
*/
/* los selectores múltiples en la lista deben todos
Empezar con & /
.foo,.bar{ color:azul;
& + .baz,&.qux{ color:rojo; }
}
/ equivalente a
.foo, .bar { color: azul; }
:es(.foo, .bar) + .baz,
:is(.foo, .bar).qux { color: rojo; }
*/
/* No en absoluto */
.foo{
color:azul;
.bar{
color:rojo;
}
}
/* & no es el primer selector simple */
.foo{
color:azul;
.bar&{
color:rojo;
}
}
/* & no es el primer selector de todos los de la lista */
.foo,.bar{
color:azul;
& + .baz,.qux{ color:rojo; }
}
Podemos notar cómo en el segundo ejemplo existen reglas que se aplican normalmente en procesadores como SASS. Esto genera que en la anidación realizada por CSS no sea necesario hacer referencia a un selector &, ya que es implícito y solo es necesario usarlo cuando se estén construyendo selectores complejos. Esto resulta muy útil si estamos desarrollando bajo las reglas de BEM. Esta característica de construcción de selectores no está incluida con los selectores múltiples y los editores hacen referencia a esta utilidad, indicando que ésta debe seguir formando parte de los procesadores.
2. @nest
Esta utilidad viene a resolver ciertos problemas que tiene el Direct Nesting. En la utilidad nos encontramos con el selector “.foo & {}”, este selector permite tener más flexibilidad al momento de realizar la anidación en CSS. Esta regla funciona como selector. Sin embargo, este debe contener un selector & dentro de la declaración de @nest.
.foo{
color:rojo;
@nido& > .barra{
color:azul;
}
}
/* equivalente a
.foo {color: rojo; }
.foo > .bar { color: azul; }
*/
.
foo {
color: red;
@nest .parent & {
color: blue;
}
}
/* equivalent to
.foo { color: red; }
.parent .foo { color: blue; }
*/
.foo {
color: red;
@nest :not(&) {
color: blue;
}
}
/* equivalent to
.foo { color: red; }
:not(.foo) { color: blue; }
*/
¿Quieres aprender más sobre CSS?
Ahora que conoces los selectores múltiples anidados en CSS, ¿quieres seguir adquiriendo conocimientos en el área? Con nuestro Bootcamp en Desarrollo Web podrás dominar esta y otras herramientas y tecnologías como JavaScript, React, Microservicios y hasta despliegue de servidores en menos de 7 meses. ¡Apúntate ahora!
