CSS en JS

'CSS-in-JS' es un flujo que comenzó a partir de componentes con estilo y define el estilo dentro de Javascript.

componente con estilo, Emoción, Mantine, etc.

mérito

1. El alcance aplicado es pequeño.
   1. Si usa el módulo css, también puede reducir el alcance de css
2. Definido en el mismo lugar que el componente. (colocación)
3. Se puede utilizar la variable Javascript.

desventaja

1. Sobrecarga del tiempo de ejecución
2. Debe descargar el archivo de biblioteca Css en JS.
   1. La emoción es 7.9KB.
   2. ¡Mantine tiene 134 KB!

gran desventaja

1. La inserción frecuente de reglas CSS genera mucho trabajo computacional.
   1. Comparando emoción y CSS
   2. Al usar CSS, hubo un aumento de rendimiento de aproximadamente el 50 %.
2. Cuando se utiliza SSR, surgen una variedad de problemas.
   1. Si nos fijamos en el repositorio de Emotion, hay muchos problemas
   .

Comparación de rendimiento en el mundo real

Medimos el rendimiento comparando CSS-in-JS y Tailwind usando el código realmente utilizado en producción.

Configuración

• CSS-in-JS usa Mantine (basado en Emotion).
• La medición del rendimiento utiliza la herramienta de desarrollo React.
• El objetivo de medición del rendimiento es una tabla de 30 * 5 (nombre del componente: SheetTable).

pantalla

Progreso del experimento

Cuando presiona el botón
• , se muestra la pantalla de arriba
.
• Active la grabación en React Profiler y presione el botón para grabar la representación de la pantalla
.
• Mide el tiempo de renderizado de SheetTable.
• Realiza un total de 5 veces para obtener el promedio.

CSS en JS (Mantine)

Viento de cola

resultado

• El tiempo de renderizado se redujo en aproximadamente un 36%.
• Incluso cambiando solo el código de una celda, el rendimiento mejoró significativamente. (Por supuesto, la mayoría son células)
• En un monitor de 60 Hz, 1 fotograma son 16 ms, pero 3 fotogramas -> 2 fotogramas

conclusión

• Usar CSS generado estáticamente es considerablemente mejor en términos de rendimiento.
• A menos que necesites usar variables JS, usa Tailwind.
• (Adicional) Para introducir SSR, es conveniente abandonar CSS-in-JS
.

Árbitro

[1] https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b