Rompre avec CSS-in-JS

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 petit.
   1. La portée CSS peut être réduite en utilisant le module CSS
Il est défini au même endroit que le composant
2. . (colocation)
3. Une variable Javascript peut être utilisée.

inconvénient

1. Il y a une 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 de règles CSS entraîne souvent beaucoup de travail de calcul.
   1. Comparaison de l'émotion et du CSS
   2. Il y a eu une augmentation des performances d'environ 50 % lors de l'utilisation de CSS.
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 est rendu
.
• 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 et calculez la moyenne.

CSS-en-JS (Mantine)

Vent arrière

résultat

• Le temps de rendu a été réduit d'environ 36%.
• Même la simple modification d'un code de cellule a entraîné une amélioration significative des performances. (Bien sûr, la plupart sont des cellules)
• Sur un moniteur 60 Hz, 1 image équivaut à 16 ms, mais 3 images -> C'est devenu 2 images

conclusion

• L'utilisation de CSS générés statiquement est considérablement meilleure en termes de performances.
• Utilisez Tailwind sauf si vous devez utiliser des variables JS.
• (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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!