El panorama CSS-in-React | Programar Plus

0

Solo me refiero a medias en broma al mundo CSS-in-JS como CSS-in-React. Muchas de las bibliotecas que se enumeran a continuación teóricamente funcionan en situaciones que no son de React (generalmente lo llaman “agnóstico del marco”), pero supongo que la gran mayoría de su uso se realiza en proyectos de React. Eso es porque React, a pesar de ser una biblioteca centrada en la interfaz de usuario, no tiene una solución de estilo bendecida en particular. Vue tiene etiquetas de estilo integradas en Componentes de un solo archivo. Lo mismo con Svelte. Angular también tiene una solución de estilos de ámbito de componente incorporada. Con React, puedes traer el tuyo.

Quizás no aventurarse demasiado lejos de sus fortalezas centrales es una de las fortalezas de React. No se. Pero tienes que elegir cómo diseñar las cosas en tus proyectos de React. Por ejemplo, puede simplemente escribir (y literalmente no hay ningún problema con esto), CSS de vainilla de archivo plano normal para diseñar sus proyectos de React. Lo recomendaría en lugar de usar en línea style={{ }} en todo cualquier día. Pero a decir verdad, hay algunas ventajas bastante interesantes al elegir una biblioteca para ayudar con los estilos. Cosas como:

  • Co-ubicación de estilos y componentes
  • Estilos de alcance a componentes
  • Usar accesorios en variaciones de estilo
  • Uso de capacidades de JavaScript dentro de la sintaxis CSS
  • Tematización

Cada biblioteca tiene su propio conjunto de elementos sofisticados que pueden ser variaciones de lo anterior, o pueden ser totalmente exclusivos de esa biblioteca.

También es notable que al usar una biblioteca en la que crea estilos en su JavaScript, no es una garantía del 100% que tenga que enviar sus estilos en JavaScript. Las bibliotecas que usan el término “tiempo de ejecución cero” se refieren típicamente a la idea de que los estilos se compilan en CSS durante un proceso de compilación, por lo que usa ese CSS como cualquier otro, lo que probablemente sea mejor para el rendimiento.

Esta investigación se le ofrece gracias al apoyo de Frontend Masters, el socio de aprendizaje oficial de CSS-Tricks.

¿Necesita capacitación en desarrollo de front-end?

Frontend Masters es el mejor lugar para conseguirlo. Tienen cursos sobre todas las tecnologías de front-end más importantes. ¿Interesado en subir de nivel tus habilidades de React? Esta es tu mejor apuesta:

Toma el
Curso intermedio de reacción

Un par de advertencias antes de revisar la lista:

  • No tengo mucha experiencia en todas y cada una de estas bibliotecas. He usado varios de ellos en proyectos reales, la mayoría en módulos CSS. No puedo hablar de los matices de cada uno. Las demostraciones a continuación son demostraciones básicas de styntax básico.
  • Si me equivoco en algún dato o quieres agregar más detalles, dame un golpe en los comentarios oa través de nuestro formulario de contacto y mejoraré las cosas.
  • El objetivo de esto, en parte, es tener un ejemplo de código de trabajo de cada uno para facilitar la referencia.

Marcos incluidos

  • componentes-estilizados
  • Módulos CSS
  • Emoción
  • Puntadas
  • extracto de vainilla
  • JSS
  • Linaria
  • JSX con estilo
  • Goober

componentes-estilizados

  • Súper popular: probablemente la opción más utilizada.
  • Popularizó las posibilidades del estilo dinámico y la magia de usar accesorios para variaciones.
  • La sintaxis literal de la plantilla se siente cómodamente similar a CSS. Parece que realmente anima a usarlo de esa manera, pero es posible (docs) usar la sintaxis de Object.
  • Admite SSR, pero no es lo mismo que las bibliotecas de “tiempo de ejecución cero” (que significa “compila en CSS estático”). Todavía incluye un tiempo de ejecución de JavaScript para cualquier estilo dinámico.

Módulos CSS

  • Muy simple. Todo lo que hace es buscar estilos y fomentar la ubicación conjunta de estilos y componentes.
  • Su característica elegante es la composición, que es básicamente mixins basados ​​en clases existentes.
  • No es una cuestión de tiempo de ejecución en absoluto, requiere un proceso de compilación. Pero todavía funciona con HMR y demás. Puede enviarlo con estilos en JavaScript o extraerlos en archivos CSS estáticos. No hace nada dinámico, por lo que es extremadamente “tiempo de ejecución cero” si extrae el CSS.
  • Se puede combinar con Sass.
  • Integrado en Next.js

Emoción

Emotion es una biblioteca diseñada para escribir estilos CSS con JavaScript. Proporciona una composición de estilo potente y predecible, además de una excelente experiencia para el desarrollador con características como mapas de origen, etiquetas y utilidades de prueba. Se admiten tanto los estilos de cadena como de objeto.

  • No parece terriblemente diferente a los componentes con estilo, TBQH, pero este podcast aborda algunas de las diferencias de rendimiento.
  • Admite SSR, pero no tiene tiempo de ejecución cero.
  • Glamorous está totalmente desaprobado (¿y supongo que Glam y Glamour también?) A favor de Emotion, así que eso es algo.

Puntadas

  • La API de Variants es muy útil y está bien hecha.
  • La experiencia del editor de TypeScript¹.
  • Apoya la tematización y fomenta el uso de un enfoque de token de diseño.
  • Las utilidades le permiten crear sus propios métodos abreviados personalizados para diseñar.
  • Admite SSR, y está más cerca del tiempo de ejecución cero, aunque no del todo. Tampoco parece generar realmente archivos CSS, sino que tiene una función que escupe CSS para que pueda usar SSR a través de un <style> etiqueta (que no puedo imaginar que sea ideal para el almacenamiento en caché).
  • Aquí está un Hilo de Twitter con una revisión honesta. Ver también todos los reacciones a esto.

extracto de vainilla

  • Yo diría que el extracto de vainilla es compatible con SSR, pero es más que eso porque esa es la única forma en que se usa, a menos que opte por funciones específicas de “tiempo de ejecución”, como la temática dinámica. Ese es el significado de “tiempo de ejecución cero”: solo se compila en archivos CSS estáticos.
  • La experiencia del editor de TypeScript¹. (Consulte también nuestro artículo reciente).
  • API de variantes, incluida una API de recetas que es como el marco de Stiches anterior.
  • Admite un enfoque temático y similar a una clase de utilidad a través de Sprinkles
  • Iba a poner a Afrodita en esta lista, pero el sus creadores se están moviendo hacia el extracto de vainilla, por lo que probablemente no sea una gran opción en estos días, aunque parece hacer prácticamente lo mismo que estas otras bibliotecas.

JSS

  • Tiene una integración específica de React
  • Tiene un extend sintaxis
  • Arquitectura de complementos

Linaria

  • El OG de las bibliotecas CSS-in-JS “Zero Runtime”.
  • Se compila en archivos CSS reales, pero aún tiene un tiempo de ejecución si haces cosas dinámicas (al menos eso creo).
  • Se siente similar a la API de componentes con estilo.
  • Soporta CSS crítico.

JSX con estilo

  • Complemento de Babel, definitivamente una cosa de proceso de construcción.
  • Usando un <style jsx> La etiqueta directamente en el componente en el nivel de anidamiento al que desea acceder es una API inteligente.
  • La falta de anidamiento no es muy buena; tienes que repetir mucho el nombre del selector.

Goober

  • Goober es notable porque tiene un nombre impresionante y solo pesa 1,25 KB, que es como un orden de magnitud más pequeño que cualquier otra cosa.
  • Prácticamente el mismo conjunto de características de componentes con estilo y Emotion.

Recursos interesantes:

  • La investigación de Shopify sobre a qué biblioteca querían cambiarse.
  • Facebook tiene algo que cocinar (video de la conferencia), pero no ha abierto nada. Aparentemente se llama “StyleX”, y ya existe una biblioteca llamada “Style9” que intenta igualar las características, incluido el tiempo de ejecución casi nulo, la salida de CSS atómico y la experiencia de TypeScript.
  • Si te gusta la creación en estilo atómico, mucha gente piensa que usar Tailwind (probablemente con el modo Just-In-Time) es el camino a seguir.
  • Probablemente una versión más React-y de Tailwind sea Styled System, que proporciona estilos como un montón de accesorios preconfigurados.
  • Twin está en la línea de la creación con estilos atómicos de una manera React-y.
  • No pude conseguir que la compilación funcionara para mí. Estoy seguro de que era solo yo, pero me rendí. Para mí, se ve exactamente como la API de componentes con estilo, excepto que la salida son clases de CSS atómicas, lo que parece un poco genial.
  • El sitio CSS en JS Playground muestra un montón de ejemplos, incluidas algunas bibliotecas que no se mencionan aquí, como Fela, Radium y más. Dios mío, hay muchas de estas cosas.
  1. Por “la experiencia del editor de TypeScript”, me refiero a que la biblioteca está escrita en TypeScript para aprovechar una de las mejores características de TypeScript: ayuda a autocompletar el código en los editores de código. Por ejemplo, si usa VS Code como editor de código y escribe un conjunto de variantes de “color”, escriba <Button color=" en su archivo JSX, debe obtener una lista de sus propias variantes compatibles en el menú contextual de autocompletar de VS Code para elegir.