À retenir
- Remplacer le JavaScript par du CSS déplace souvent la complexité plutôt que de la supprimer.
- Utilisez le CSS moderne de manière agressive pour la mise en page et la présentation, conservatrice pour le comportement.
- La découvrabilité et la testabilité comptent davantage que le plus petit diff possible.
- Les container queries et les animations pilotées par le défilement sont des gains quasi universels ; la logique d'état ne l'est pas.
- L'objectif est une base de code qu'un inconnu pourrait comprendre en un an — pas seulement un code plus court aujourd'hui.
Tous les quelques mois, une nouvelle série de fonctionnalités CSS arrive dans les navigateurs, et le discours est toujours le même : supprimez votre JavaScript, laissez la plateforme faire le travail. Container queries, :has(), animations pilotées par le défilement, imbrication — la boîte à outils du CSS moderne est réellement puissante. Mais il y a une vérité plus discrète que les équipes ne découvrent qu'une fois en production : rendre un seul composant plus simple peut rendre l'application entière plus difficile à comprendre. La vraie question n'est pas de savoir si vous pouvez remplacer le JavaScript par du CSS. C'est de savoir si ce compromis est réellement rentable pour votre produit et votre équipe.
Le coût caché du « moins de code »
Lorsque vous remplacez un gestionnaire d'événements JavaScript par une solution purement CSS, vous ne supprimez pas la logique — vous la déplacez. Un basculement afficher/masquer construit avec :has() et une case à cocher est élégant et sans dépendance. Mais six mois plus tard, un développeur qui débogue cette interaction cherchera dans le JavaScript, ne trouvera rien, et perdra vingt minutes avant de réaliser que le comportement réside dans un sélecteur enfoui dans une feuille de style.
C'est la tension centrale que met en lumière le récent travail de Smashing Magazine sur le CSS moderne : une logique répartie entre CSS et JavaScript augmente la surface cognitive de votre base de code. Moins de lignes, mais plus d'endroits où chercher. Pour un projet solo, c'est un non-problème. Pour une équipe de huit personnes qui tournent sur la base de code, c'est une taxe payée sur chaque modification future.
Un cadre pour décider
Chez Evocative, nous ne demandons pas « est-ce la manière moderne ? ». Nous demandons si la complexité migre ou disparaît. Posez-vous ces questions avant de vous tourner vers un motif purement CSS :
- La logique relève-t-elle de la présentation ? Un dévoilement au survol, un en-tête collant, un changement de disposition responsive — ce sont de la présentation. Un état qui affecte les données, les analyses ou les règles métier ne l'est pas, et devrait rester en JavaScript.
- Le comportement peut-il être découvert ? Si un nouveau développeur ne peut pas prédire où réside la logique, documentez-la ou reconsidérez-la. La découvrabilité l'emporte sur l'élégance.
- Est-ce testable ? Les interactions JavaScript sont faciles à couvrir avec des tests unitaires et d'intégration. Le comportement purement CSS nécessite souvent des outils de régression visuelle dont vous ne disposez peut-être pas.
- La dégradation est-elle gracieuse ? Les fonctionnalités CSS modernes bénéficient d'un support inégal. Connaissez votre solution de repli avant de déployer, et non après un ticket de support.
Là où le CSS moderne gagne clairement
De nombreuses migrations sont un pur gain. Remplacer un écouteur de redimensionnement JavaScript par des container queries supprime un coût réel à l'exécution et toute une catégorie de bugs. Les animations pilotées par le défilement qui nécessitaient auparavant la tuyauterie d'IntersectionObserver deviennent déclaratives et performantes. Une mise en page qui s'adapte sans JavaScript est presque toujours plus robuste, car elle survit lorsque les scripts échouent à se charger. La règle empirique : si la fonctionnalité permet au navigateur de faire quelque chose pour lequel il est nativement optimisé, la complexité disparaît réellement plutôt que de se déplacer.
Le parallèle avec l'IA dans le design
Il y a un écho frappant ici avec la conversation qui a lieu dans tout l'univers de l'UX en ce moment. Tout comme l'IA remodèle le processus de design — en automatisant le milieu tout en redéfinissant où se situe le jugement humain —, le CSS moderne redéfinit où réside la logique front-end. Dans les deux cas, le danger est le même : des outils qui réduisent l'effort visible peuvent discrètement retirer le contexte dont les humains ont besoin pour garder le contrôle. « Humain dans la boucle » dans le design signifie garder les personnes capables de raisonner sur le système. L'équivalent front-end consiste à garder votre équipe capable de raisonner sur le code. La commodité qui érode la compréhension est une dette à long terme déguisée en gain à court terme.
Notre approche chez Evocative
Notre règle est simple : adopter le CSS moderne de manière agressive pour la présentation et la mise en page, et de manière conservatrice pour le comportement. Nous migrons par petites étapes réversibles, nous documentons toute interaction pilotée par CSS non évidente directement dans le composant, et nous traitons le support des navigateurs comme une décision produit, et non comme une préférence de développeur. L'objectif n'est jamais le plus petit diff — c'est une base de code qu'un inconnu pourrait reprendre dans un an et comprendre sans carte.
Le CSS moderne est l'une des meilleures choses arrivées au front-end depuis une décennie. Mais rendre votre code plus court et rendre votre produit maintenable ne sont pas le même objectif. Les équipes qui gagnent sont celles qui connaissent la différence avant de refactoriser, et non après.
Sources
- Les utilisateurs synthétiques me font repenser la « recherche imparfaite » — UX Collective
- L'IA vide le milieu du design, laissant un sablier derrière elle — UX Collective
- « Humain dans la boucle » signifie s'assurer que l'humain n'est pas hors de la boucle — UX Collective
- Le règlement de comptes de l'IA dans l'UX se préparait depuis 20 ans — UX Collective
- Le CSS moderne pourrait rendre votre front-end plus complexe — Smashing Magazine
