Bootstrap et Tailwind, deux frameworks CSS, deux époques

Je bootstrap, tu bootstrap, il bootstrap, nous bootstrapons… Oulah, ça ne va pas bien moi … 😱

Bonjour, bonjour 😁
Cette semaine, on va parler « CSS », et plus précisément de « framework CSS », le plus connu, « Bootstrap » et le petit nouveau qui veut lui piquer sa place de numéro 1, « Tailwind »… 

Bootstrap est sortie en 2011

Ce framework est arrivé à une époque ou le web ne ressemblait pas du tout a ce à quoi il ressemble aujourd’hui, juste pour vous donner une autre date, Chrome est sorti 3 ans avant.

Bootstrap a été une énorme bombe à l'époque, faire du responsive en 2011, c’était la grosse galère, et Bootstrap a simplifié à beaucoup de dev (moi y compris) la création de sites internet (on parlait moyen d’app web) responsive. 
Ce qui fait qu’il est devenu très populaire assez rapidement.

Le truc, c’est que le responsive de Bootstrap est fait au moyen de “Hack”, ça fonctionne, mais en a-t-on encore besoin aujourd’hui ?

Les problèmes de Bootstrap en 2022

En fait, en 2011, cela faisait complètement sens d’utiliser Bootstrap dans son projet rien que pour le responsive. Sauf qu' entre temps, le CSS natif a évolué, les navigateurs ne sont pas du tout les mêmes, en fait maintenant les grid sont des fonctions de base du CSS.

Le problème c’est que, Bootstrap ayant été tellement présent chez les dev, on le retrouve un peu partout (en fait, même le thème de ce site, c’est du Bootstrap …).

Et là où c’est un problème, c’est qu’il y a des “tout petits projets simples » qui dès le début importe tout le CSS de Bootstrap alors qu’il n’est pas forcément nécessaire.

Je ne dis pas qu’il faut bannir Bootstrap, mais j’aimerais rappeler simplement que le “grid” de Bootstrap, reste à la base des “Hack” pour donner l'illusion du responsive, même si avec le temps, ça s’est amélioré.
En prenant le temps d’aller regarder le code source de Bootstrap, on se rend compte que même la version 4 n’utilise pas les API natives de CSS pour les Grid.
C’est un peu dommage et ça réduit les performances, faire appel à du code compilé, à savoir les fonctions CSS native du navigateur, ce sera toujours plus performant que du code interprété.

Enfin, même si Bootstrap est disponible en SCSS, généralement le nettoyage n’est pas fait et l’ensemble du CSS est embarqué dans les projets en production.
Ce qui fait qu’on a un CSS très lourd pour au final ne pas forcément utiliser tous les composants proposés par ce CSS.

Ce gros CSS est dû au fait que Bootstrap par définition donne accès à des classes de styles clef en main comme le “btn” et “btn-primary”

Tailwind, le framework utilitaire

Avant toute chose, Tailwind n’est pas tranché, contrairement à Bootstrap, il n’y a pas de classe comme les “btn” dont je vous parlais plus haut, pour créer un bouton on va plutôt utiliser 
“bg-blue-700 text-white px-5 py-3 font-bold rounded”.
Ne partez pas tout de suite ! Vous allez voir pourquoi c’est cool.

Un « watcher » sur votre code HTML pour créer un CSS tout petit

Vous n’êtes pas partie ? Cool.
Le truc cool avec cette méthode c’est qu’ils fournissent un “file watcher”, qui va analyser votre HTML pour vous fournir un fichier CSS avec uniquement les classes que vous utilisez.
Cela va donc vous générer un « bébé fichier CSS »contenant uniquement ce dont vous avez besoin, et, en regardant la documentation vous vous rendrez compte qu’il est même compatible avec le TSX / JSX de React, elle n’est pas belle la vie ?

Pour ceux qui ne veulent pas avoir plein de classe dans leur HTML

Bon je comprends, vous ne trouvez pas ça élégant … OK.
Eh bien, ils y ont pensé aussi, il est tout à fait possible d’utiliser un @apply dans votre classe CSS.
Créer votre classe, par exemple “.btn-blue” et mettez y dedans “ @apply bg-blue-700 text-white px-5 py-3 font-bold rounded;” et voilà… Vous avez recréé votre classe CSS que vous pouvez modifier une seule fois 🙂 au lieu de parcourir tout le HTML à chaque fois.

Un système de grid comparable à celui de Bootstrap

Je ne vais pas m'éterniser sur ce sujet-là, le système de grid en classe CSS, une fois que vous l’aurez vu, il va vous rappeler vaguement quelque chose si vous venez de Bootstrap.
La différence c’est que derrière “Tailwind” utilise les API CSS natives du navigateur.

Conclusion

Cette semaine, petit article simple pour vous inciter à jeter un œil à Tailwind si vous êtes un grand utilisateur de Bootstrap, la curiosité n’a jamais fait de mal à personne 😝.
Moi, il ne me reste plus qu'à vous souhaiter une très bonne semaine et à vous dire à la semaine prochaine 😁