Las hojas de estilo en cascada (más conocidas como CSS) son el lenguaje de diseño (y una de las tres grandes bases, junto a HTML y JavaScript) de la World Wide Web, el lenguaje que permite a los desarrolladores dar formato a las páginas web aplicándoles estilos que alteran aspectos como colores, tipografías o espaciados.
Y ahora, este lenguaje nacido en 1996 está quizá a punto de experimentar uno de los mayores cambios de su historia. Según publica Miriam Suzanne, miembro del CSS Working Group del W3C (el organismo encargado de establecer los estándares de las tecnologías web), se ha aprobado el paso de la especificación de CSS Nesting de la actual fase de 'borrador para editores' a la de 'primer borrador de trabajo público'.
Esto lo introduce en el proceso de revisión de propuestas conocido como 'Recommendation Track', lo que puede desembocar en su inclusión en la versión estándar del lenguaje CSS. La versión online, aún clasificada como 'borrador para editores', especifica que la propuesta estaba disponible "únicamente para su debate" y que "su publicación aquí no implica la aprobación de su contenido por parte del W3C".
Pero, ¿qué es 'CSS Nesting' (literalmente, 'anidamiento CSS')? Fundamentalmente, se trata de permitir que las reglas CSS puedan expresarse de forma anidada, incluyendo bloques de código unos dentro de otros, una opción no disponible por ahora de manera nativa.
Todo esto con el fin de:
- Hacer el código más legible.
- Aumentar su modularidad y la facilidad de mantenimiento de las hojas de estilo.
- Reducir la duplicación de código.
Veamos un ejemplo:
Hoy en día, cuando escribimos CSS, nos vemos obligados a dominar los 'selectores CSS' para definir las reglas aplicables a nuestro sitio y precisar a qué elementos queremos aplicar determinado estilo. El objetivo del anidamiento CSS es que tengamos que utilizarlos mucho menos a menudo, porque usando el indentado ya estaremos supliendo su labor (de una manera, además, mucho más legible para humanos).
Esto conllevará algunos cambios de sintaxis. Por ejemplo, '&' pasará a convertirse en el selector de anidamiento para establecer reglas condicionales. Así en
.ejemplo {
background: grey;
&:hover { background: red; } }
En este ejemplo, el selector &:hover está haciendo referencia, realmente, a .ejemplo:hover; es decir, a aquellos casos en que tengamos el ratón sobre el elemento 'ejemplo'.
Trabajar desde ya con el nuevo borrador
Pero, ¿qué hacer si nos ha gustado la idea y queremos empezar a trabajar con CSS siguiendo las recomendaciones del borrador? Fácil: los navegadores no entenderían la nueva sintaxis y la web resultante no podría visualizarse correctamente.
A no ser, claro, que recurriéramos a una herramienta de transformación de CSS como PostCSS, que ya cuenta con un plug-in (postcss-nesting) para transformar CSS anidado en el CSS ajustado al actual estándar…
… así, utilizando herramientas de terminal como npm y npx, podremos instalar PostCSS y usarlo luego para transformar ficheros .pcss (anidados) en .css.
Tanto esta opción como una futura oficialización del 'CSS Nesting' constituyen alternativas al uso de preprocesadores CSS tan populares como SASS (aunque éstos cuentan con otros atractivos además del uso del anidamiento).
Ver 4 comentarios