Thème dynamique sans CSS-in-JS
J'étais un grand fan de styled-components. J'adorais la flexibilité. Puis, je me suis heurté à un mur.
Un projet nécessitait de réduire le poids du runtime. J'ai décidé d'essayer les CSS Modules et le CSS natif. Le résultat m'a surpris. J'ai supprimé styled-components, Emotion et goober de mes projets. Je n'ai rien perdu dont j'avais réellement besoin.
Le plus grand gain n'était pas seulement la performance. C'était la suppression de la dépendance au stylage. Dans un projet, le runtime CSS-in-JS occupait 30 % du bundle client.
Le CSS pur a évolué. Vous n'avez plus besoin de lourdes bibliothèques JS pour ces tâches :
• Imbrication : Utilisez l'imbrication CSS native. • Variations de couleurs : Utilisez color-mix(). • Contrôle de la spécificité : Utilisez @layer. • Composants responsives : Utilisez les container queries.
Voici comment construire un thème en utilisant un seul fichier et des propriétés personnalisées.
- Définissez les tokens dans un fichier CSS.
:root { --color-bg: #ffffff; --color-text: #1a1a1a; --color-accent: #3c7dc4; }
[data-theme="dark"] { --color-bg: #14161a; --color-text: #f5f5f0; --color-accent: #6aa6e8; }
- Utilisez ces variables dans vos composants.
.button { background: var(--color-accent); color: var(--color-bg); }
- Changez de thème en modifiant un seul attribut.
function setTheme(theme) { document.documentElement.dataset.theme = theme; localStorage.setItem("theme", theme); }
Les composants n'ont pas besoin de ThemeProvider. Ils n'ont pas besoin de se re-render. Le navigateur gère la mise à jour via la cascade. Cela permet de maintenir la majeure partie de votre application dans des Server Components.
Pour éviter le « flash » du mauvais thème lors du chargement de la page, utilisez un petit script inline dans votre head HTML :
Arrêtez d'utiliser le JS pour générer des styles au runtime. Utilisez des variables CSS natives pour vos tokens. Cela permet d'avoir moins de code et des temps de chargement plus rapides.
Source : https://dev.to/kirill_c_7b35589230/dynamic-theming-without-css-in-js-d7e