Au tout début de ma carrière de développeur web, j'ai commis l'erreur tragique de m'arrêter quelques années de construire des sites web.

Je me rappelle encore clairement du moment où je me suis replongé dans l’univers web et j’ai alors réalisé que les mise en pages à base de tableaux n’étaient plus au goût du jour. A la place, tout le monde utilisait maintenant des nouveaux machins appelés “floats”.

Tout ça est désormais de l’histoire ancienne, et je suis prêt à parier que la plupart d’entre vous n’ont jamais connu la joie d’obtenir le comportement souhaité en manipulant float: right. Vous êtes nés dans un monde de display: flex;, insouciant des douleurs et souffrances de vos prédécesseurs.

Mais attention! Ne baissez pas votre garde… Qui frappe à la porte? C’est Grid qui débarque en promettant de tout changer… encore une fois!

Sonder Le Web

Et voilà le cycle du web. Une vague après l’autre, en constant changement; et en promettant à chaque fois une meilleure manière de centrer les éléments verticalement qui est la bonne cette fois, c’est sûr c’est promis!

C’est pour ça que nous sommes toujours à la recherche de nouvelles ressources pour nous aider, et c’est là que le sondage State of CSS intervient. Cette année encore, nous avons agrégé une tonne de données provenant de développeurs autour du monde, et ces données font vraiment ressortir les différents changements que l’univers CSS subit actuellement.

Bien sûr, nous vous encourageons à aller parcourir les résultats complets, mais nous voulions aussi compiler ce petit rapport pour identifier quelques tendances majeures. Mais avant toute chose, commençons par quelques informations démographiques.

L’Ère Du CSS “Utility-First”

A l’époque des mise en pages a base de tableaux, on écrivait tout simplement <font color="red">Hello World</font> quand on voulait rendre du texte rouge. Ca marchait plutôt bien jusqu’au jour où quelqu'un a fait remarquer que si Le Client décidait que les titres seraient maintenant bleus et pas rouges, il faudrait s’embarquer dans une grosse opération de rechercher-remplacer.

La solution fut d’utiliser le CSS! On pouvait maintenant écrire <h1>Hello World</h1> a la place, et styler les titres avec h1 { color: red; }.

Grâce à cette “séparation des préoccupations” (“separation of concerns”), on pouvait désormais produire des sites tels que le fameux CSS Zen Garden, où le meme document HTML pouvait être transformé en résultat completements differents rien qu’en changeant de feuille de style. Et comme nous le savons bien, tout projet CSS depuis lors à été mené à bien sans le moindre problème d’architecture ou maintenance.

Bon, peut-être pas. Le HTML et le CSS étaient adéquats pour construire des sites statiques de taille moyenne qui n’allaient pas trop changer avec le temps, mais les méthodes traditionnelles ont commencé à montrer leurs faiblesses quand il s’est agi de gérer des applications web à large échelle. Et avec la popularité des frameworks JavaScript orientés vers les composants, peut-être est-il temps de revoir nos vieilles hypothèses?

C’est là qu’entre en jeu Tailwind CSS et les autres frameworks “utility-first”. Tailwind CSS se démarque du lot par son taux de popularité de 86%, autrement dit la proportion de développeurs ayant utilisé Tailwind CSS et étant prêts à l’utiliser à nouveau.

Un autre point de donnée à considérer est la proportion de participants qui sont d’accord avec l’idée que “les classes utilitaires (non-sémantiques) telles que .center, .texte-large, etc. doivent être évitées”. Ce taux est passé de 25% en 2019 (déjà une minorité) à 20% cette année. Bien que cela ne soit pas une chute dramatique, cela confirme l’idée que les méthodes plus orthodoxe commencent à être remises en question.

Cela ne veut pas dire qu’il y a une bonne et une mauvaise méthode. D’ailleurs, un des points clés qui aident Tailwind CSS à se démarquer est justement le fait que l’outil contourne certains des défauts de l’approche non-sémantique.

Mais ça montre bien que les développeurs CSS sont prêts à expérimenter et essayer de nouvelles choses, ce qui est la clé d’un écosystème dynamique.

Et cela explique aussi pourquoi Tailwind CSS est sur le point de devenir une librairie plus “mainstream”, tel que l’indique notre graphe en quadrants.

~

~

~

Le Champ de Bataille CSS-in-JS

En parlant d’expériences, le “CSS-in-JS” est un autre prétendant au trône de la disruption.

Si un “tabou” du CSS est de mélanger les styles visuels avec le markup, un autre est de mélanger les styles avec *mon dieu!* du JavaScript. Mais tels que l’indique son nom, c’est là toute la raison d’être du CSS-in-JS.

Mais encore une fois, les librairies CSS-in-JS qui arrivent à tirer leur épingle du jeu sont celles qui arrivent à offrir les avantages sans les inconvénients. A titre d’exemple, la plupart permettent d’utiliser la syntaxe traditionnelle CSS, sans avoir à convertir vos styles en objets JavaScript.

L’autre point qui se démarque est la quantité d’approches différentes qui coexistent. Des CSS Modules à Styled Components à Fela en passant par Stitches, chaque méthode résoud les mêmes problèmes avec une solution légèrement différente. Le résultat est une sorte d'expérience génétique grandeur nature, en utilisant la sélection naturelle pour déterminer quelle approche convaincra le plus grand nombre de développeurs.

~

~

~

Repenser CSS À Partir de Zéro

Certains d’entre vous sont sans doute en train d’émettre quelques réticences. Vous n’allez pas jeter à la poubelle des années d’habitudes à écrire des classes sémantiques juste à cause de quelques jolies courbes colorées, et vous n’allez pas non plus commencer à mettre du JavaScript dans votre CSS (ou bien est-ce le contraire?) juste parce que c’est ce que les petits jeunes ont décidé de faire! Non, tout ce dont vous avez besoin c’est de votre bon vieux CSS tel que vous l’avez toujours connu!

Mauvaise nouvelle: le CSS lui-même est en train de changer, et les plus gros changements sont sans doute encore à venir.

Quand Grid est sorti, on a finalement obtenu une méthode dédiée pour gérer les mises en page en CSS. Et maintenant que Grid devient plus populaire, on commence à constater des effets de second ordre sur d’autres aspects du CSS.

Par exemple, une grille bien conçue peut permettre de gérer plusieurs tailles d’écran sans écrire la moindre media query. Et le module Subgrid qui est sur le point d’arriver va à son tour débloquer tout un tas de possibilités, rendant de nombreuses méthodes et astuces actuelles complètement obsolètes. Les bouquins CSS de 2021 risquent d'être plutôt différents!

Mais cette refonte des bases du CSS ne se limite pas à Grid. Les Propriétés Logiques (Logical Properties) promettent de nous faire repenser notre compréhension même des directions. Dans ce nouvel univers CSS, la gauche peut être à droite et le haut peut être en bas. Qui eût cru que M.C. Escher était membre du CSS Working Group?

Si tous ces changements vous donnent mal au cœur, pas de problème. C’est facilement réglé en utilisant la media query prefers-reduced-motion. Et si la situation vous paraît lugubre, peut-être est-il temps d’enlever le mode sombre avec prefers-color-scheme?

Au total, toutes ces nouvelles propriétés ouvrent la porte sur un CSS radicalement nouveau.

Et encore, nous n’avons même pas évoqué les propriétés qui n’existent pas encore. Les développeurs ont une longue liste de souhaits, parmi lesquels les container queries et les sélecteurs parents. Deux propriétés qui nous feront sûrement reconsidérer à leur tour la manière dont on écrit le CSS un jour ou l’autre.

Le Nouveau CSS

Que ce soit à travers de nouvelles méthodes ou de nouvelles media queries, le credo du nouveau CSS est d'accueillir à bras ouverts l’adaptabilité et la flexibilité. Peut-être que nous devrions en faire de même?

Le CSS est souvent critiqué comme trop compliqué, arbitraire, ou “pas un vrai langage de programmation”. Mais si on prend le temps de considérer les nombreux rôles remplis par le CSS, l’énormité du challenge devient plus claire. Et le fait d’avoir désormais un système solide pour styler les différents aspects du web qui ne fait que s’améliorer est en soi une grande réussite.

Ces améliorations cela dit leur prix: les nouveaux développeurs auront plus à apprendre avant d'être opérationnels, et les développeurs plus expérimentés ne pourront plus se reposer sur leurs lauriers autant qu’avant.

Mais il en faut plus pour nous effrayer. Nous sommes développeurs CSS après tout, et ce n’est pas un petit challenge qui va nous faire peur!

Du moment qu’il ne s’agit pas de faire marcher float: right.