Repenser le CSS in JS
(dev.to)Le CSS est un élément clé pour rendre les interfaces utilisateur à la fois belles et fonctionnelles, mais à mesure que l’échelle grandit, sa gestion devient de plus en plus difficile.
Les conflits de styles, la baisse des performances et les difficultés de maintenance tourmentent de nombreux développeurs.
Cet article explique en détail une nouvelle approche pour résoudre ces problèmes, en particulier le CSS in JS.
En partant du contexte historique du CSS, il couvre un large éventail de sujets, des méthodes modernes de styling jusqu’aux systèmes de design du futur.
La structure de l’article est la suivante.
- Définition et contexte du CSS en JS
1. Qu’est-ce que le CSS en JS ?
2. Le contexte du CSS en JS - Contexte historique du CSS et du design
3. Le contexte du CSS
4. Le contexte du design
5. Le contexte des design systems - Analyse des méthodes de gestion des styles et nouvelle proposition
6. Comment la gestion des styles s’est-elle faite jusqu’à présent ?
7. Comment devrait-on gérer les styles ? - Plan concret d’implémentation du CSS de JS
8. Pourquoi du CSS dans JS ?
9. Présentation du projet mincho
10. Un CSS dans JS favorable au CSS
11. Un CSS dans JS extensible - Intégration avec les design systems
12. Le CSS dans JS pour les design systems
En particulier, cet article présente la méthodologie SCALE CSS et un nouveau concept appelé StyleStack, puis propose le projet mincho qui s’appuie sur eux. L’objectif est d’implémenter dans JS un CSS à la fois favorable au CSS et extensible.
L’objectif ultime de cet article est de montrer aux développeurs, designers et autres parties prenantes de projets web les possibilités de meilleures solutions de styling.
Merci de votre lecture malgré la longueur de l’article.
3 commentaires
Désolé si cela ne va pas dans le sens de l’enthousiasme autour du projet, mais j’ai l’impression que l’industrie du frontend devrait adopter une vision plus long terme et construire des outils ou des conventions largement partagés. Du point de vue de quelqu’un qui a une certaine expérience des stacks comme SCSS, LESS, AngularJS, Angular 2.0 ou React, les nouvelles technologies frontend donnent souvent l’impression d’être davantage surconçues que nécessaire et assez peu productives.
En matière de consensus sur le web, il existe les standards du web. En CSS, des fonctionnalités comme l’imbrication de type SCSS ont été introduites, et des discussions se poursuivent en permanence autour des classes, des méthodes de programmation fonctionnelle, des web components, avec l’ajout régulier de nouvelles fonctionnalités.
À mon avis, le front-end lui-même ne s’est diversifié que récemment, donc on a l’impression qu’on essaie un peu tout et n’importe quoi.
Cela vaut pour l’ensemble de l’écosystème, depuis des bibliothèques comme React ou Vue jusqu’au tooling, comme les bundlers et les linters.
En plus, contrairement au domaine des applications, il ne semble pas qu’une seule entreprise définisse les bonnes pratiques puis les diffuse, ce qui renforce encore la confusion !!