La idea de crear CSS en JavaScript se ha vuelto más popular en los últimos años, en gran parte debido al dominio de marcos reactivos como React y otros. Esbelto. Dichos marcos no fuerzan el uso de JavaScript para diseñar componentes, pero se prestan a ello. Como resultado, han surgido varias bibliotecas CSS-in-JS para facilitar el proceso.

Este artículo le presenta CSS-in-JS, luego demuestra varios marcos prometedores para implementarlo.

¿Qué es CSS en JavaScript?

Básicamente, existen dos variantes de CSS de la vieja escuela: definición interna y carga desde un archivo externo. En ambos casos, el navegador carga el CSS, lo analiza y luego aplica los estilos al marcado. CSS-in-JS ofrece un tercer enfoque: entregar CSS programáticamente al generarlo en código.

La gran ventaja aquí es que el código JavaScript tiene acceso total a las variables y condiciones, incluidas aquellas que representan el estado de la aplicación. Por lo tanto, CSS se puede generar de forma totalmente reactiva en un contexto en vivo. La desventaja es la complejidad adicional. Una de las ventajas del CSS tradicional es la simplicidad, al menos en términos de cómo se cargan los estilos, porque en realidad es una compensación.

CSS-in-JS proporciona la sintaxis para convertir JavaScript en estilos que puede aplicar un navegador. Independientemente del marco que utilice, el resultado se verá como el Listado 1.

Listado 1. Con el marco de componentes de estilo CSS-in-JS

// Create a Title component that'll render an 
 tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a 
 tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  
    
  
);

Lista tomada de 1 marco de componentes de estilo. Cada marco tiene sus propias convenciones, pero este ejemplo le brinda los aspectos básicos de cualquier sistema:

1. Defina CSS en la sintaxis de JavaScript.
2. Aplicar estilos al marcado (por ejemplo, JSX).

CSS a nivel de componente

Los estilos de aplicación a gran escala tienden a estar inflados. En el gran esquema de las cosas, puede ser muy difícil comprender qué afecta las propiedades de elementos específicos, y puede ser aún más difícil realizar cambios de manera efectiva. Esta fragilidad a veces hace que mantener CSS sea una tarea difícil.

CSS-in-JS resuelve este problema con CSS de alcance de componentes. Casi todos los marcos de JavaScript están orientados a componentes, por lo que crear CSS envuelto alrededor de esos componentes es una opción natural.

Al garantizar automáticamente que los estilos en un componente se apliquen solo a ese componente, el desarrollador de la aplicación se libera de la necesidad de desarrollar clases únicas a nivel mundial para aplicarlas en una variedad de páginas y secciones de diseño. CSS a nivel de componente significa que la forma en que se diseña un diseño informa naturalmente cómo se aplican los estilos CSS.

Por supuesto, las aplicaciones todavía necesitan implementar y heredar estilos. Cualquier marco CSS-in-JS debería resolver este problema.

Aplicaciones de una sola página y de varias páginas

Últimamente se ha hablado mucho sobre las aplicaciones de una sola página frente a las aplicaciones de varias páginas. En particular, hay preguntas sobre qué partes de la aplicación pueden ser completamente dinámicas, cuáles pueden renderizarse previamente y cuáles requieren un poco de ambas. La conclusión de CSS-in-JS es que los estilos deben crearse donde sea necesario; ya sea en el servidor o en el cliente. Afortunadamente, Este parece ser el caso para la mayoría de los marcos.

Marcos CSS en JS

Lo primero que encuentra al mirar una aplicación CSS-in-JS es la cantidad de opciones disponibles. Su mejor opción estará informada principalmente por el marco de JavaScript que está utilizando. Algunas soluciones CSS-in-JS son específicas para un marco reactivo específico, mientras que otras son agnósticas. Incluso entre las bibliotecas CSS-in-JS independientes del marco, a menudo hay una cierta afinidad con el marco. Por lo tanto, vale la pena considerar qué solución CSS-in-JS es popular en la comunidad que admite el marco que está utilizando.

Otra característica a tener en cuenta al evaluar marcos es la compatibilidad con TypeScript. No todos los marcos CSS-in-JS funcionan con TypeScript, aunque esto se está convirtiendo en la norma.

Echemos un vistazo a algunos de los mejores marcos disponibles.

Componentes con estilo

Componentes con estilo es uno de los marcos CSS-in-JS de más larga duración. Está diseñado para React (aunque hay intentos de usarlo en otros lugares) y se ocupa principalmente de diseñar los componentes de React. Es bastante activo y popular. Más de 37.000 estrellas en GitHub.

Viste un ejemplo de componentes con estilo en el Listado 1.

Emoción

Aunque la emoción es independiente del marco parece tener afinidad con Svelte. El Listado 2 contiene un ejemplo de una Emoción. Tenga en cuenta que en el ejemplo estamos viendo la definición de CSS en línea usando la sintaxis de JavaScript.

Listado 2. Emoción en línea CSS-in-JS

import { css, cx } from '@emotion/css'

const color="white"

render(
  

    Hover to change color.
  
)

JSX con estilo

JSX con estilo El valor predeterminado para Next.js es una solución CSS-in-JS, que desafortunadamente le da cierta inercia. Es un proyecto de Git saludable con más de 7000 estrellas, pero no es tan activo como algunos de los otros proyectos descritos aquí (su rama v2 parece haberse quedado dormido).

JSX con estilo Es una opción obvia cuando se usa Next.jspero es posible cambiarlo en otra biblioteca CSS-in-JS compatible con React si lo desea.

Módulos CSS

Módulos CSS Es una implementación temprana y efectiva de la idea CSS-in-JS. El proyecto en GitHub tiene más de 16 000 estrellas, pero no se ha actualizado en varios años. Es independiente del marco y se puede integrar en muchas bibliotecas reactivas populares. Por ejemplo, aqui con vue.

Los módulos CSS están pensados ​​como una solución genérica que funciona fuera del sistema de componentes del marco para generar estilos de ámbito nativo de forma predeterminada. Tenga en cuenta que si bien los módulos CSS pueden sonar como una especificación oficial, en realidad no lo es: es un proyecto concreto de cómo lograr CSS-in-JS.

Mellizo

CSS viento de cola a biblioteca CSS funcional. Es uno de los favoritos entre los desarrolladores de JavaScript, por lo que su combinación con un enfoque CSS-in-JS es inevitable. Twin combina Tailwind con CSS-in-JS.

Twin nos permite usar clases Tailwind en varias aplicaciones CSS-in-JS como se describe. aquí. Este es un proyecto activo y en desarrollo. Más de 6000 estrellas en GitHub.

hay gemelos varios ejemplos cómo integrarlo con diferentes marcos y herramientas de construcción. Por ejemplo, ¿cómo puede ser esto? Se integra con Emotion a través de Webpack.

JSS

JSS con es un enfoque agnóstico del marco Más de 6000 estrellas de GitHub. Parece ser bastante popular y tiene buena documentación, aunque últimamente no ha visto mucha actividad en el repositorio. JSS es una de las soluciones CSS-in-JS activas más antiguas y, en cierto modo, el comienzo del movimiento.

Angular

Angular, como muchos marcos reactivos, lo admite CSS a nivel de componente. El sistema angular es bastante poderoso y flexible con características similares a otras bibliotecas. Esto encaja con la filosofía de diseño todo en uno de Angular y parece ser el enfoque más común cuando se usa Angular. Sin embargo, es posible Use un marco CSS-in-JS como JSS.

Desventajas de usar CSS en JavaScript

Aunque CSS-in-JS es muy popular, existe una tendencia contraria. Las razones están relacionadas con el rendimiento y la complejidad. A Artículo reciente de Sam Magura, un defensor activo del marco de la emoción, describe los problemas en detalle. El principal problema de rendimiento es que CSS-in-JS convierte CSS en tiempo de ejecución, lo que aumenta el trabajo realizado por el navegador y el marco en tiempo de ejecución. El resultado son tiempos de carga más lentos y más código que se puede romper.

Pero los beneficios de CSS-in-JS, de los que hablo en este artículo, también son claros. Entonces, la solución no es abandonar CSS-in-JS, sino encontrar una manera de obtener los beneficios y minimizar los inconvenientes. El artículo analiza varias posibles soluciones a los problemas de rendimiento de CSS-in-JS.

Como ocurre con todo lo relacionado con el software, la comunidad continúa impulsando mejores ideas. Ahora estamos buscando formas de mantener los beneficios de CSS-in-JS mientras minimizamos las desventajas.

El resultado

El uso de un marco CSS-in-JS no siempre es necesario, pero puede ofrecer grandes ventajas en comparación con el uso simple de CSS o un preprocesador de CSS. Con una variedad de soluciones para elegir, debería ser posible encontrar una que se ajuste a la pila que le gusta. Además, encontrará estos marcos en proyectos existentes, por lo que es útil saber qué son y cómo funcionan.