Una herramienta que ni siquiera se ha lanzado formalmente, pero que tiene expectantes a miles de desarrolladores en el mundo. Se trata de CSS Nesting Module, la cual busca facilitar el desarrollo de proyectos de gran escala y su mantenibilidad en el tiempo

El W3C (World Wide Web Consortium) es un consorcio internacional que tiene por objetivo establecer directrices, estándares, y armonizar las especificaciones para el desarrollo de tecnologías web. Dentro de este proceso participan grupos miembros, universidades, instituciones políticas, empresas comerciales, entre otros.

Bajo en una filosofía de código Open Source y en conjunto desarrollan nuevos estándares y especificaciones, las cuales son publicadas bajo el nombre de “Documentos”. A su vez, estos poseen distintas categorías que podrían considerarse estados de madurez de una propuesta a estandarizarse en el desarrollo web. Actualmente el fundador de W3C y actual presidente del consorcio fue quien participó en el desarrollo de los protocolos y arquitecturas Cliente-Servidor, HTTP, HTML por nombras algunos de sus aportes.

Sin embargo, en esta ocasión nos centraremos en una propuesta presentada el 17 de Junio y que a la fecha se encuentra en estado “Editor‘s Draft”. Además, esta funcionalidad ha comenzado a llamar la atención de diversos desarrolladores Front End del área.

CSS Nesting Module

“CSS Nesting Module” o CSS Anidado en español, se encuentra en estado “Editor’s Draft”, ¿Qué quiere decir esto? Pues se trata de un trabajo en progreso con intenciones de ser estándar y aún no publicado para su revisión, esperando que el continuo aporte de los miembros involucrados en esta especificación logre los requisitos técnicos suficientes en el estatuto del grupo para pasar a la siguiente etapa.

Dicha especificación está a cargo de los editores Tab Atkins Jr. y Adam Argyle, ambos empleados de Google. Tal cual como se indica en la web oficial de la propuesta, se proporciona este borrador solo para discusión y debe citarse como trabajo en progreso. Cabe destacar que existen propuestas presentes hace años y que aún se trabajan para algún día ver la luz. Por esta razón, es llamativo que una propuesta de este tipo resalte entre cientos de ellas.

¿Para qué nos sirve?

La propuesta presentada afecta directamente el cómo se desarrolla CSS (Cascade Style Sheet) que es el lenguaje para estilizar la web, y que por mucho tiempo hemos usado herramientas para mejorar el desarrollo de nuestro CSS como los preprocesadores de CSS (Sass, Stylus, Post CSS, entre otros). Lo anterior, en pos de facilitar el desarrollo de proyectos de gran escala y su mantenibilidad en el tiempo.

Unas de las principales características que comparten estas herramientas es CSS Nesting, la que facilita en gran medida el desarrollo de los estilos añadiendo reglas de estilo dentro de reglas de estilo. 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.

A continuación se muestran ejemplos de CSS sin Nesting y CSS haciendo uso de este selector especial, estaremos acostumbrados a este último si en nuestro desarrollo de estilos incluimos herramientas como el preprocesador Sass:

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;
  }
}

Como notamos en los ejemplos anteriores la redacción y mantenibilidad de nuestros estilos mejora con esta regla bien conocida. Sin embargo, traer esta especificación al CSS Estándar es un gran aporte y mejora a futuros proyectos.

Diferencias entre CSS Nesting module y preprocesadores

Ahora bien, hasta este momento he hecho comparaciones con pre-procesadores haciendo referencia al concepto detrás de CSS anidado. Aunque, en el borrador de los editores se establecen reglas claras en el uso de esta especificación. Aquí encontraremos diferencias a la hora de aplicar CSS anidado nativo versus preprocesadores. Dejan claro que CSS Nesting Module no viene a sustituir estas herramientas complementarias ya que aún poseen ventajas notables sobre el draft actual publicado.

A continuación explico reglas a considerar para hacer uso de Nesting Module:

Reglas de estilos de anidamiento

Se definen dos reglas de anidamiento, el Direct Nesting y el uso de @nest:

Direct Nesting

Una regla de estilo se puede anidar directamente dentro de otra regla de estilo si su selector tiene el prefijo anidado.

.foo {
  color: blue;
  &.bar { color: red; }
}

/* equivalente a
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

.foo {
  color: blue;
  .bar { color: blue; }
}
/* invalido por que no existe el selector & */

.foo {
  color: red;
  .bar & { color: blue; }
}
/* invalido por que el selector que anida no es el primer elemento */

Podemos notar cómo en esta última imagen existen reglas que son aplicaciones normales en procesadores como SASS, como anidar CSS sin hacer referencia a un selector & necesariamente, ya que es implícito y solo hacemos uso de este para construir 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 en el Nesting Module y los editores hacen referencia a esta utilidad, indicando que ésta debe seguir formando parte de los procesadores.

@nest

Esta utilidad viene a resolver ciertos problemas que el Direct Nesting trae. Nos encontramos un selector “.foo & {}” que no está permitido y permitir más flexibilidad a la hora de anidar CSS. Esta regla funciona como selector más sin embargo se debe cumplir con la regla que el selector siguiente a la declaración de @nest debe contener un selector &.

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* equivalente a
  .foo { color: red; }
  .foo > .bar { color: blue; }
*/

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* equivalente a
  .foo { color: red; }
  .parent .foo { color: blue; }
*/

Para más ejemplos de selectores con @nest válidos para CSS Nesting visita el borrador oficial aquí.

.foo {
  color: red;
  @nest .bar {
    color: blue;
  }
}
/* invalido ya que no existe el selector & */

.foo {
  color: red;
  @nest & .bar, .baz {
    color: blue;
  }
}
/* invalido ya que todo los selectores no poseen un & */

Para más ejemplos de selectores no válidos con @nest para CSS Nesting visita el borrador oficial aquí.

​​Las virtudes de la comunidad

Es relevante remarcar la labor del W3C  y como los miembros que la integran bajo la filosofía Open Source son quienes establecen las bases del desarrollo web. Su objetivo se basa en buscar nuevas propuestas, para así mejorar esta amplia área que junta distintas disciplinas. También, se recalca la influencia de herramientas de terceros que impulsaron el desarrollo de esta propuesta; la que aún en etapa de “Editor’s Draft”, tiene a los desarrolladores atentos.

Personalmente ver cómo se generan equipos de personas que destinan su conocimiento a aportar a proyectos Open Source y que estos terminan por generar cambios, así como estándares de desarrollo afectado a millones de desarrolladores alrededor del mundo, son actos que como desarrollador me enorgullecen.

Estoy seguro que podríamos mejorar como comunidad aún más si las empresas que hacen uso de estos proyectos Open Source adoptan una cultura de colaboración y aporte a estos proyectos; ya sea resolviendo algún bug o bien, generando PR’s (Pull Requests) con features a esos proyectos que nos han sido de utilidad y que han sido creados por profesionales como nosotros.