Los costos de rendimiento invisibles de las bibliotecas CSS-in-JS modernas

Este artículo está lleno de una gran cantidad de datos de Aggelos Arvanitakis. Pero déjame centrarme en su último consejo:

Investigue si una biblioteca CSS-in-JS de tiempo de ejecución cero puede funcionar para su proyecto . A veces tendemos a preferir escribir CSS en JS por la DX (experiencia de desarrollador) que ofrece, sin necesidad de tener acceso a una API JS extendida. Si su aplicación no necesita soporte para temas y no hace un uso intensivo y complejo del cssaccesorio, entonces una biblioteca CSS-in-JS de tiempo de ejecución cero podría ser una buena candidata.

“Tiempo de ejecución cero” significa que usted crea sus estilos en una sintaxis CSS-in-JS, pero lo que se produce son .cssarchivos como los que produciría cualquier otro preprocesador CSS. Esto coloca la herramienta en una categoría totalmente diferente. Es sólo una herramienta para desarrolladores, en lugar de una herramienta en la que el usuario del sitio web paga el precio por utilizarla.

La biblioteca CSS-in-JS insignia de tiempo de ejecución cero es Linaria . Creo que la sintaxis se ve muy bien.

import { css } from 'linaria';import fonts from './fonts';const header = css`  text-transform: uppercase;  font-family: ${fonts.heading};`;h1 className={header}Hello world/h1;

También soy fanático de la capacidad de limitar el alcance que brindan los módulos CSS , que se puede realizar con un estilo de tiempo de ejecución cero .

Enlace directo →