CSS-in-JS n'est pas automatiquement mauvais.
Il résout de réels problèmes :
- colocation de styles au niveau des composants
- composition de thèmes
- variantes dynamiques
- éviter les grandes feuilles de style globales
Le coût en performance est que certaines approches CSS-in-JS fonctionnent à l'exécution alors que le CSS statique ne le fait pas.
C'est la partie que les équipes doivent évaluer honnêtement.
Tout CSS-in-JS n'est pas identique
Il existe deux grandes catégories :
- systèmes à l'exécution qui génèrent et injectent des styles dans le navigateur
- systèmes à la compilation qui extraient les styles à l'avance
Ces profils de performance sont très différents.
Si votre bibliothèque de styles génère des règles pendant le rendu, vous en payez le prix côté client. Si vos styles sont extraits au moment de la construction, le coût d'exécution est beaucoup plus bas.
Cette distinction compte plus que l'étiquette.
Pourquoi le CSS Statique Gagne Souvent
Le CSS statique, qu'il soit écrit à la main, extrait ou utility-first, déplace plus de travail au moment de la construction et permet au navigateur de faire ce qu'il sait déjà bien faire :
- télécharger les styles une fois
- les mettre en cache
- les appliquer sans moteur de stylage JavaScript dans le chemin critique
C'est une des raisons pour lesquelles Tailwind peut sembler opérationnellement simple dans de grandes applications. Le compromis est une ergonomie différente, pas de la magie.
L'Angle de React
L'injection de styles à l'exécution peut également compliquer le rendu car l'insertion de styles a des exigences d'ordre.
C'est pourquoi React expose useInsertionEffect pour les auteurs de bibliothèques CSS-in-JS. Ce n'est pas une preuve que CSS-in-JS est cassé. C'est une preuve que le stylage à l'exécution a des coûts de coordination que le CSS statique évite largement.
Une Règle de Décision Plus Utile
Choisissez CSS-in-JS à l'exécution quand :
- le stylage est hautement dynamique
- l'équipe valorise fortement cette ergonomie
- le budget de performance peut absorber le travail côté client
Choisissez CSS statique ou extrait quand :
- le coût de démarrage compte
- les appareils mobiles sont une contrainte clé
- le système de design est principalement connu au moment de la construction
C'est un domaine où "zéro-runtime" est une caractéristique significative, pas juste une phrase marketing.
Tailwind Est Une Réponse Valide
Tailwind n'est pas mieux parce que c'est à la mode. Il est utile parce qu'il transforme de nombreuses décisions de style en sortie à la construction et en chaînes de classes prévisibles.
Si cela correspond à l'équipe, c'est un bon compromis.
Si ce n'est pas le cas, les modules CSS extraits ou d'autres approches à la compilation peuvent vous donner des avantages similaires à l'exécution sans adopter des classes d'utilitaires partout.
Lectures Complémentaires