CSS em JS

'CSS-in-JS' é um fluxo que começou a partir de componentes estilizados e define o estilo em Javascript.

componente estilizado, Emoção, Mantine, etc.

mérito

O escopo aplicado é pequeno.
1. Se você usar o módulo css, também poderá reduzir o escopo do css
Definido no mesmo local do componente. (colocação)
Variável Javascript pode ser usada.

desvantagem

Sobrecarga de tempo de execução
Você deve baixar o arquivo da biblioteca Css em JS.
2. A emoção tem 7,9 KB.
   Mantine tem 134 KB!

enorme desvantagem

A inserção frequente de regras CSS causa muito trabalho computacional.
1. Comparando Emoção e CSS
   Ao usar CSS, houve um aumento de desempenho de cerca de 50%.
Ao usar o SSR, surgem vários problemas.
2. Se você olhar o repositório Emotion, há muitos problemas

Comparação de desempenho no mundo real

Medimos o desempenho comparando CSS-in-JS e Tailwind usando o código realmente usado na produção.

Configurar

CSS-in-JS usa Mantine (baseado em Emotion).
A medição de desempenho usa a ferramenta React dev.
A meta de medição de desempenho é uma tabela 30 * 5 (nome do componente: SheetTable).

tela

Progresso da experiência

Quando você pressiona o botão

, a tela acima é renderizada
• .
Ative a gravação no React Profiler e pressione o botão para gravar a renderização da tela
Mede o tempo de renderização de SheetTable.
Execute um total de 5 vezes para obter a média.

CSS-em-JS (Mantine)

Vento favorável

resultado

O tempo de renderização foi reduzido em cerca de 36%.
Mesmo alterando apenas o código de uma célula, o desempenho melhorou significativamente. (Claro, a maioria delas são células)
Em um monitor de 60 Hz, 1 quadro tem 16 ms, mas 3 quadros -> 2 quadros

conclusão

Usar CSS gerado estaticamente é consideravelmente melhor em termos de desempenho.
A menos que você precise usar variáveis ​​JS, use Tailwind.
(Adicional) Para introduzir o SSR, é conveniente abandonar o CSS-in-JS
• .

Referência

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