CSS-en-JS

'CSS-in-JS' est un flux qui part de composants stylisés et définit le style dans Javascript.

composant stylisé, émotion, mantine, etc.

mérite

1. Le champ d'application appliqué est restreint.
   1. Si vous utilisez le module CSS, vous pouvez également réduire la portée de CSS
2. Défini au même endroit que le composant. (colocation)
3. Une variable Javascript peut être utilisée.

inconvénient

1. Surcharge d'exécution
2. Vous devez télécharger le fichier de la bibliothèque Css dans JS.
   1. L'émotion fait 7,9 Ko.
   2. Mantine fait 134 Ko !

énorme inconvénient

1. L'insertion fréquente de règles CSS entraîne beaucoup de travail de calcul.
   1. Comparer Emotion et CSS
   2. Lors de l'utilisation de CSS, les performances ont augmenté d'environ 50 %.
2. Lors de l'utilisation de SSR, divers problèmes surviennent.
   1. Si vous regardez le dépôt Emotion, il y a de nombreux problèmes

Comparaison des performances dans le monde réel

Nous avons mesuré les performances en comparant CSS-in-JS et Tailwind en utilisant le code réellement utilisé en production.

Installation

• CSS-in-JS utilise Mantine (basé sur Emotion).
• La mesure des performances utilise l'outil de développement React.
• L'objectif de mesure des performances est un tableau 30 * 5 (nom du composant : SheetTable).

écran

Progression de l'expérience

Lorsque vous appuyez sur le bouton
• , l'écran ci-dessus s'affiche
.
• Activez l'enregistrement dans React Profiler et appuyez sur le bouton pour enregistrer le rendu de l'écran
.
• Mesure le temps de rendu de SheetTable.
• Effectuez un total de 5 fois pour obtenir la moyenne.

CSS-en-JS (Mantine)

Vent arrière

résultat

• Le temps de rendu a été réduit d'environ 36 %.
• Même en modifiant un seul code de cellule, les performances se sont considérablement améliorées. (Bien sûr, la plupart d'entre eux sont des cellules)
• Sur un moniteur 60 Hz, 1 image équivaut à 16 ms, mais 3 images -> 2 images

conclusion

• L'utilisation de CSS générés statiquement est considérablement meilleure en termes de performances.
• Sauf si vous devez utiliser des variables JS, utilisez Tailwind.
• (Supplémentaire) Pour introduire SSR, il est pratique d'abandonner CSS-in-JS

Réf

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