Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Una introducción a CSS-in-JS: Ejemplos, ventajas y desventajas

by
Length:MediumLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

Las librerías CSS-in-JS nos proporcionan un nuevo enfoque para escribir CSS. Su objetivo es abordar las limitaciones de CSS, como la falta de funcionalidad dinámica, alcance y portabilidad. A pesar de sus ventajas, CSS-in-JS es una tecnología controvertida, ya que muchos desarrolladores preguntan si vale la pena complicar aún más el desarrollo front-end.

Este artículo tiene la intención de darte una descripción general de alto nivel de las librerías CSS-in-JS. Analizaremos cómo funcionan estas bibliotecas, qué problemas resuelven y cómo decidir si debes usarlas.

¿Qué es CSS-in-JS?

Las librerías CSS-in-JS han estado ganando terreno desde que aparecieron los frameworks JavaScript basados en componentes en el desarrollo front-end. Angular, React, Vue y otros frameworks se basan en módulos llamados "componentes" a partir de los cuales puedes construir una aplicación completa de una sola página (SPA). Un componente suele ser un elemento de la interfaz de usuario, como un botón, una ventana emergente o una barra de navegación. Solo necesitas crear un componente una vez y puedes reutilizarlo en cualquier contexto dentro de la aplicación.

Pero, ¿cómo debes diseñar eficientemente los componentes de SPA? Si utilizas archivos CSS globales, será difícil saber cómo será el resultado final. Debido a la naturaleza en cascada de CSS (hojas de estilo en cascada), las hojas de estilo pueden cargarse en cualquier orden y anularse entre sí en cualquier combinación. La gestión de dependencias es otro problema cuando se trata de diseñar una SPA. Si la administración de dependencias es difícil cuando se trabaja con sitios web normales, será casi imposible con una aplicación web modular por encima de cierta complejidad.

Una librería CSS-in-JS bien diseñada puede resolver todos estos problemas. CSS-in-JS es, de hecho, una librería de JavaScript que agrupa cada componente de JavaScript con todas sus reglas y dependencias CSS. Como resultado, los componentes pueden ejecutarse independientemente, sin depender de ningún archivo CSS externo. Así es como Max Stoiber, el cocreador de la biblioteca Styled Components explica en su excelente publicación de blog cómo funcionan las bibliotecas CSS-in-JS:

“Durante tres años, he diseñado mis aplicaciones web sin ningún archivo .css. En cambio, he escrito todo el CSS en JavaScript. ... Puedo agregar, cambiar y eliminar CSS sin ninguna consecuencia inesperada. Mis cambios en el estilo de un componente no afectarán nada más. Si elimino un componente, también elimino su CSS. ¡No más hojas de estilo agregadas! ” –

Max Stoiber

Creo que esta declaración resume la técnica bastante bien. Con las bibliotecas CSS-in-JS, puedes escribir todo tu CSS en archivos .js para que puedan funcionar como módulos JavaScript.

Ejemplos de librerías CSS-in-JS

Aunque cada librería CSS-in-JS tiene el mismo propósito (es decir, agrupar componentes con CSS), cada una viene con características y sintaxis ligeramente diferentes. Veamos cómo las librerías CSS-in-JS más populares se comparan entre sí.

Framework específico vs. Framework agnóstico

Algunas librerías solo funcionan con un framework de JavaScript específico. Por ejemplo, Radium se ha creado para las aplicaciones React, mientras que Styled JSX solo admite componentes escritos en JSX (que puedes usar con y sin React).

Las librerías CSS-in-JS específicas del framework utilizan la misma sintaxis que el framework que admiten. Por ejemplo, Styled JSX usa literales de plantilla dentro de la sintaxis JSX para agregar estilos CSS a los componentes. El siguiente código (de los documentos GitHub de Styled JSX) crea dos tipos de botones, uno normal y uno grande:

Otras librerías CSS-in-JS como JSS, Emotion y Styled Components mencionados anteriormente son independientes del framework. Por lo tanto, puedes usarlos junto con cualquier framework de trabajo basado en componentes, JavaScript simple y algunos de ellos, como Aphrodite, también funcionan con Componentes Web.

JSS css-in-js

Para ver cómo se ven las librerías CSS-in-JS independientes de framework en la vida real, puedes probar los campos de juego en línea de JSS o consultar el siguiente ejemplo de Componentes Web de los documentos de GitHub de Aphrodite:

Selectores únicos contra estilos en línea

Para manejar el alcance, la mayoría de las librerías CSS-in-JS como JSS, Emotion y Styled Components generan automáticamente un selector único para cada componente. Para verlo tú mismo, puedes ir a la página de inicio de Styled Component e inspeccionar uno de los ejemplos con las herramientas de desarrollador de tu navegador. Por ejemplo, he inspeccionado el botón fantasma rosado "I'm a styled <Button />" con Firefox DevTools:

Styled Component unique selector css in js

Como puedes ver, Styled Components ha generado dos clases únicas, una llamada components__SecondButton-sc-1gmolv7-3 fWxBIM para el botón y otra llamada components__AlignCenter-sc-1gmolv7-0 hjdyfl para el div padre.

Aunque esta es una excelente manera de crear selectores absolutamente únicos que no causen problemas de especificidad CSS, el código fuente no se ve muy bonito. Alternativamente, algunas bibliotecas CSS-in-JS como Radium agregan CSS en línea sobre la marcha al HTML en lugar de generar clases únicas.

El último enfoque no solo conduce a un código HTML más legible, sino que también tiene otras ventajas, como un mejor rendimiento, independencia del orden de origen y eliminación del código muerto. Sin embargo, el uso de estilos en línea también tiene algunas deficiencias. Según la documentación de Radium:

"A pesar de eso, hay algunas características y técnicas CSS comunes que los estilos en línea no admiten fácilmente: media queries, estados del navegador (:hover, :focus, :active) y modificadores (¡no más .btn-primary!). Radium ofrece una interfaz estándar y abstracciones para lidiar con estos problemas".

Entonces, esa es la compensación. Según tus necesidades, puedes decidir cuál es el mejor enfoque para ti.

Características unicas

Las librerías CSS-in-JS no solo difieren en la sintaxis, el soporte del framework y el manejo del alcance, sino que cada una tiene capacidades únicas que no necesariamente se incluyen en otras librerías, como:

  • selectores globales,
  • estilo basado en el estado,
  • cliente VS. la renderización del lado del servidor (o ambos),
  • caché,
  • mapas de fuentes,
  • prefijo automático incorporado,
  • media queries,
  • selectores anidados
  • soporte integrado para animaciones,
  • plugins y paquetes adicionales,
  • y otros.

Aunque la mayoría de las bibliotecas vienen con buena documentación, aquí hay una tabla de comparación de Michele Bertoli que incluye las características más importantes de múltiples bibliotecas CSS-in-JS.

Michele Bertolis table of CSS-in-JS libraries
La tabla de las bibliotecas CSS-in-JS de Michele Bertoli (¡es grande!)

Ventajas de CSS-in-JS

Ahora, hablemos sobre las ventajas de las bibliotecas CSS-in-JS (aunque ya he mencionado algunas de ellas).

Alcance local

De manera predeterminada, CSS no permite el alcance local. Cada regla de estilo tiene un alcance global, por lo que se aplica a todo el proyecto. Como resultado, los estilos pueden anularse entre sí de maneras sorprendentes. Los desarrolladores front-end han creado múltiples metodologías que agregan modularidad a CSS, como BEM, OOCSS y SMACSS. Los preprocesadores y PostCSS son otra forma de modularizar CSS. Las bibliotecas CSS-in-JS llevan este concepto al siguiente nivel al automatizar el alcance, lo que conduce a un alto nivel de previsibilidad.

Encapsulación

Los componentes encapsulados ocultan los detalles de la implementación. Solo exponen una API al mundo exterior para que otros componentes puedan interactuar con ellos. La encapsulación facilita el mantenimiento y elimina los errores, ya que puedes modificar todo el código relacionado con los componentes en el mismo lugar, sin tener que preocuparte por cambiar inesperadamente otras partes de la aplicación.

Portabilidad

Como los componentes incluyen todo el código fuente, los estilos y la lógica que necesitan para una ejecución adecuada, puedes moverlos de forma segura. Básicamente funcionan de inmediato y te permiten crear aplicaciones acopladas de forma flexible en las que los componentes se comunican entre sí únicamente a través de las API.

Reutilización

Los componentes son reutilizables, por lo que sólo tienes que escribirlos una vez, y ya podrías ejecutarlos en todas partes. No solo puedes reutilizar componentes dentro de la misma aplicación, sino también en otras aplicaciones creadas con el mismo framework.

Funcionalidad dinámica

Como CSS-in-JS es esencialmente código JavaScript, puedes aplicar lógica compleja a las reglas de estilo, como bucles, condicionales, variables, estilo basado en el estado y mucho más. Por lo tanto, es una solución ideal si necesitas crear una interfaz de usuario complicada que requiere funcionalidad dinámica.

Desventajas de CSS-in-JS

Aunque las bibliotecas CSS-in-JS te permiten crear aplicaciones basadas en componentes de una manera lógica y eficiente, también tienen algunas características que podrían hacer que tengas cuidado con ellas.

Curva de aprendizaje

CSS-in-JS definitivamente tiene una curva de aprendizaje, especialmente si no has utilizado frameworks basados en componentes ni componentes web antes. Además de aprender la nueva sintaxis, también necesitas buscar una nueva forma de pensar, que necesita tiempo y podría demorar el flujo de trabajo de desarrollo durante un tiempo.

Capa adicional de complejidad

Poner en uso una biblioteca CSS-in-JS agrega una capa adicional a la pila de front-end, que a veces puede ser innecesaria. Aunque CSS-in-JS administra la complejidad de manera excelente, no siempre vale la pena la molestia, especialmente en el caso de un proyecto más simple.

Lectura del código

Los selectores generados automáticamente empeoran significativamente la legibilidad del código. Esto puede ser una gran preocupación para ti si utilizas regularmente las herramientas de desarrollo de tu navegador para la depuración, pero también para los principiantes, ya que es esencial para ellos entender el código que escribieron.

Entonces, ¿cuándo debes usar bibliotecas CSS-in-JS?

Las bibliotecas CSS-in-JS te proporcionan una metodología sencilla y segura para aplicar estilo a las aplicaciones basadas en componentes. Además de los frameworks JavaScript, también puedes usarlos junto con los Componentes Web. También pueden ser útiles si deseas crear una experiencia de usuario compleja para un front-end monolítico, como la funcionalidad basada en el estado.

Por otro lado, CSS-in-JS probablemente no es para ti si eres un desarrollador principiante, quieres crear sitios web sin un front-end dinámico, o apreciar la simplicidad y la legibilidad del código. Es posible que razonablemente encuentres que tus herramientas como Sass o PostCSS son perfectas para tus objetivos y que no quieres adquirir una nueva tecnología sólo por el bien de la novedad.

Más información sobre CSS-in-JS y componentes web

Sin embargo, lo más probable es que CSS-in-JS gane más tracción en el desarrollo front-end. Si estás interesado en trabajar a profundidad estas bibliotecas, echa un vistazo a los artículos de Oleg Isonen, el creador del framework JSS sobre "¿Qué es realmente CSS-in-JS?" y "Las compensaciones de CSS-in-JS", también.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.