CSS en JS es el futuro

Superemos las limitaciones del CSS de una vez por todas

La última gran batalla en el desarrollo front-end se está librando en los estilos y acabará con el CSS (Cascading Styles Sheet) tal y como lo conocemos.

You can also read this article also in English.

El CSS, como tal, nació allá por 1995 cuando la web consistía en simples documentos, pero ha pasado mucho desde entonces y hoy la web consiste en complejas e interactivas interfaces de usuario donde el CSS tradicional se encuentra con muchas limitaciones, sobre todo cuando entra en juego la filosofía de componentes.

La primera de estas limitaciones es el aislamiento de los estilos ya que de primeras no tenemos una manera fácil e intuitiva para conseguir organizar nuestros estilos sin que afecten los unos a los otros. De hecho, organizar el CSS a media/gran escala es bastante complicado, incluso me atrevería a decir que es uno de los problemas más complejos al que se enfrentan los programadores front-end hoy en día. Por eso, históricamente han aparecido múltiples alternativas para solucionarlo como OOCSS, SMACSS y, seguramente la más conocida por todos, BEM. No obstante son convenciones, ninguna evita que las utilices mal ni soluciona el problema de una manera definitiva.

El segundo inconveniente sería lo limitado que es CSS ya que no te permite crear variables ni funciones para reutilizar código. Por eso empezamos a usar alternativas como LESS o SASS, para enriquecerlo con todas esas funcionalidades que todos amamos.

Y la última gran limitación que nos encontramos (y también la más odiada por todos) sería su compatibilidad entre navegadores. Cada uno interpreta e implementa la especificación como le da la gana… Y claro, luego hay que asegurarse de que todo se vea bien en todos los navegadores. Conocer la interpretación que cada navegador da a la especificación no parecía muy buena idea.

Por eso, primero se intentó paliar con mixins de SASS, pero podíamos hacerlo mucho mejor, hasta el punto de hacer desaparecer esta preocupación gracias a Autoprefixer, el cual se encarga de recordar toda esa información por nosotros. Curiosamente es posible gracias a PostCSS, que no es más que una herramienta que procesa nuestro CSS con JS.

Aunque antes de empezar a hablar de las ventajas de usar CSS en JS, vamos a ver lo que no es:

• CSS en JS no son estilos inline, eso se llaman estilos inlines y es otra cosa.
• CSS en JS no significa dejar de aprender CSS, aunque a algunos les duela, vas a tener que seguir sabiendo cómo funciona CSS, es más, creo que seguiremos necesitando saber CSS durante mucho tiempo ya que hace muy bien su función principal, dar estilos a nuestra interfaz.
• CSS en JS no significa que tu web perderá los estilos si desactivas el JS del navegador, ya que al final vamos a seguir generando CSS de toda la vida.

Dicho esto, veamos entonces qué significa CSS en JS, básicamente significa usar JS para solucionar todas las carencias que tiene el CSS y encajar la última pieza del rompecabezas web, los estilos, en el JS y en la filosofía de componentes.

¿Filosofía de componentes?¿Última pieza del rompecabezas web?

Después de años de evolución del desarrollo front-end, que todas las soluciones (frameworks) que aparecen (Angular, React, Vue, Ember…) estén basados en componentes no es fruto de ninguna conspiración, sino consecuencia de que ésta es la manera más lógica de crear interfaces: Tratarlas como pequeñas unidades independientes que se usan para componer otras más complejas.

Pero la última frontera que nos impedía hacerlo de una manera eficiente, después de la absorción del DOM por JS (con react y JSX), es el CSS. Tener el CSS en otra tecnología lo hace más complejo de integrar en nuestros componentes y frena la evolución del ecosistema.

Sí, bueno, pero a mí los frameworks me dan igual yo solo quiero maquetar.

Me parece muy bien, pero en algún punto estoy seguro que vas a tener que entenderte con el JS, ¿o nunca vas a tener aplicaciones con lógica?

Por eso CSS en JS lo único que significa es escribir el mismo CSS que haces ahora en un fichero JS, es más la sintaxis es exactamente igual. Lo único que desaparece son los ficheros .css tal y como lo conocemos y además de regalo te vas a llevar lo siguiente:

• Estilos aislados, no tendrás que preocuparte del nombre que tienen tus clases o de si habrá conflictos con otras. Tendremos componentes completamente aislados listos para ser usados en cualquier parte de nuestra aplicación o aplicaciones.
• Toda la potencia de JS para crear variables, funciones, hacer imports… Además, a diferencia de los preprocesadores podrás usarlo tanto en CSS como en JS.
• Entre otras cosas usar los imports de JS, nos permitirá optimizar el tamaño de nuestro CSS y hacer “lazy load” (cargar sólo el CSS mínimo necesario).
• Podremos compartir CSS a través de NPM de una manera más sencilla, al conseguir que nuestro CSS sea JS también podemos aprovechar, de una manera más eficiente, la potencia de NPM y estoy seguro que esto derivará en una evolución más rápida de todo el ecosistema CSS.
• Llevarnos el DOM al JS ha conseguido una cosa de la que mucha gente aún no es consciente, que podamos escribir código una vez y transformarlo en soluciones para web, móvil o incluso sketch. Llevarnos el CSS a JS conseguirá que la obtención de un lenguaje universal para dar estilos sea mucho más sencilla y podamos usar la misma sintaxis para cualquier tipo de renderización, incluso PDF o formatos nuevos que aparezcan.

No voy a cubrir las distintas soluciones que hay para usar CSS en JS, porque son muchas y todo está en constante evolución. Cualquier cosa que ponga seguramente se verá superada en pocos meses. Pero si me gustaría hacer una reflexión final.

Desde el momento en que adoptamos filosofías como BEM y añadimos tecnologías como SASS ya estamos admitiendo que el CSS tiene muchas carencias, usar CSS en JS no es más que la evolución natural para solucionarlas de una forma más efectiva e universal.

Sinceramente, quien se cierre a está evolución por miedo o desconocimiento a algo nuevo me parece que se hace un flaco favor. En mi opinión, el CSS en JS no es un capricho o una moda, es una evolución lógica y además creo que inevitable.

Abro debate y espero vuestros comentarios, ¿pensáis que los ficheros .css van a desaparecer en favor del JS o no creéis que vaya a llegar a tanto?.