Lorsque j'ai commencé mon aventure dans le développement web, j'avais autour de 12 ans et je faisais mon site en WYSIWYG (un peu comme on fait un document Word). J'utilisais Frontpage, Namo Web Editor ou encore Dreamweaver et j'étais content.

Le CSS n'était pas fou-fou et à l'époque, bien avant l'arrivée des flex et grid de ce monde, la structure du site reposait sur les tableaux, tout le monde avait des écrans à tube cathodique et le responsive faisait une timide apparition.

On avait donc des <table> partout et c'était un joyeux bordel.

Je ne me suis jamais considéré comme un talentueux artiste visuel. J'ai pourtant eu mon lot de création et de montage sur Photoshop, mais jamais je n'aurais pu tiré quoi que ce soit de ceux-ci si ce n'est des petits fou-rire et des private jokes.

J'ai rapidement écarté de mon arsenal tout ce qui touchait au design. Incluant, donc, le CSS.

À force de travailler dans le backend, de mettre sur pied des outils internes dont l'aspect visuel est secondaire, on fini par perdre les réflexes de base du CSS. Et Dieu merci, des professionnels ont commencé à publier des frameworks CSS, à commencer par Bootstrap, dont j'ai longtemps abusé, puis TailwindCSS et son florilège de petites classes utilitaires qui viennent polluer mes belles petites balises HTML toute propre.

Bootstrap

C'est le premier framework CSS que j'ai découvert et quelle bouffée d'air frais pour moi. Bon je sais, en 2021, mettre "bouffée d'air frais" et "Bootstrap" dans la même phrase, ça peut donner des syncopes à certains.

Mais il faut reconnaître que, considérant mon absence de talent visuel et la volonté de ne pas passer une éternité à bâtir une interface, Bootstrap a énormément accéléré le développement de certains de mes projets. Au détriment, il faut l'admettre, d'un clair manque de personnalité puisque tous les éléments sont déjà stylisés et que pour y mettre sa touche perso, il faut plonger dans le CSS.

J'en ai abusé du Bootstrap dans mes projets, surtout parce qu'on attendait de moi des résultats backend et que la majorité de mes projets n'avaient pas de vocation à être grand public mais surtout des outils utilisés en interne. De ce fait, je n'ai jamais vraiment chercher à personnaliser un projet sous Bootstrap.

TailwindCSS

TailwindCSS a été mis sur pied par Adam Wathan, membre éminent de la communauté Laravel, notamment créateaur d'un cours sur le Test-Driven Development avec Laravel d'où émane le point de départ de mon amour pour le TDD.

TailwindCSS est très différent de Bootstrap puisqu'il se présente plutôt comme une grosse boîte à outil de classe CSS représentant des propriétés CSS pré-définies.

À première vue, j'ai eu beaucoup de difficulté à en voir l'intérêt. Pourquoi ne pas simplement créer mon fichier CSS et mettre les instructions directement dedans ? Et puis ces balises HTML remplies de classes CSS, ça ne rendrait pas un peu le HTML illisible ?

Puis j'ai essayé, j'ai fais des tests, j'ai récupéré des components ici et là, je me suis fait un projet complet à l'aide de TailwindCSS. Et j'ai compris.

TailwindCSS s'adresse, à mon goût, aux gens comme moi. Des gens qui n'ont pas forcément envie de se prendre le chou avec le CSS, qui veulent que le développement de l'interface aille vite. C'est d'ailleurs la première chose que l'on lit sur le site web de Tailwind :

Rapidly build modern websites without ever leaving your HTML.

Je l'ai de nouveau expérimenté sur mon petit repository pour apprendre à exploiter Typescript. Tous les projets sont bâtis avec TailwindCSS et honnêtement, j'aurais du mal à m'en passer aujourd'hui.

Être en mesure de bâtir, rapidement, une interface web, qui soit à mon goût, sans avoir à ouvrir de fichier CSS et en gérant relativement bien le responsive, la disposition, l'apparition ou non d'élément selon la taille de l'écran, etc. C'est très très winner chez moi.

Conclusion

Si j'avais un framework CSS a recommander aujourd'hui, ce serait bien TailwindCSS. Les classes utilitaires rendent le design ultra-flexible et deux projets Tailwind ne se ressembleront certainement pas, là où avec Bootstrap c'est un peu plus complexe.

Je crois bien que Tailwind vient combler un manque d'intérêt (pour ma part, en tout cas) envers le CSS et ce framework serait plus une épine dans le pied qu'un avantage pour quiconque manipule le CSS avec brio.

Mais pour les autres, ça en vaut vraiment la peine, Tailwind m'a réconcilié avec le CSS.