J’ai commencé à apprendre le CSS en 2007. Oui, nous avons fait beaucoup de chemin depuis !
En 2021, le frontend se développe trop vite. Il est difficile et fastidieux de faire du CSS à partir de zéro pour chaque projet. Sans compter que choisir le bon framework CSS n’est pas non plus une tâche facile.
Je vois souvent de jeunes développeurs frontaux ou dorsaux demander : quel est le meilleur framework CSS ?
Après avoir appris et utilisé de nombreuses technologies CSS au fil des ans, j’ai voulu partager avec vous ce que je pense être le meilleur framework CSS UI aujourd’hui.
Il existe 3 types de frameworks CSS
Avant d’entrer dans le vif du sujet, vous devez comprendre les trois différents types de frameworks CSS. Il est important de faire le bon choix.
1) Préprocesseurs et transformateurs CSS
Ce sont des frameworks de construction, ils ne produisent pas de CSS par défaut.
Ils ajoutent des fonctionnalités qui n’existent pas et sont utilisés pour écrire le CSS plus rapidement.
Les plus connus que j’ai utilisés sont : SASS, Less, Stylus et PostCSS.
Chacun a d’autres frameworks ou plugins basés sur eux. Par exemple, il existe Susy, écrit en SASS, qui permet de créer des grilles de mise en page plus rapidement.
Vous les verrez souvent inclus dans des frameworks frontaux ou des boilerplates.
Ce ne sont pas des frameworks CSS UI.
2) Kit UI et frameworks CSS basés sur des composants
Ce sont les frameworks CSS les plus utilisés.
Ils sont fournis avec une interface utilisateur préconstruite et personnalisée. C’est le moyen le plus rapide que je connaisse pour créer des interfaces avec CSS.
Mais ils ont aussi leurs inconvénients. La structure HTML est généralement prédéfinie et le design n’est pas toujours facile à personnaliser.
En un mot : ils sont très subjectifs.
Ceux que j’ai utilisés depuis 2011 : Bootstrap, Foundation, Skeleton, Materialize, Milligramme et Bulma.
3) Cadres CSS atomiques / Utilitaires d’abord
Atomic CSS et utility-first CSS sont des concepts très similaires, je dirais même identiques, et ils sont devenus très populaires au cours des 3~4 dernières années.
Les 2 raisons principales sont : React avec les composants stylisés et Tailwind CSS.
En bref, les deux concepts consistent à écrire des classes ou des propriétés CSS directement sur le HTML.
C’est donc très flexible, vous pouvez créer la structure HTML que vous voulez, mais il est beaucoup plus lent de construire une interface utilisateur avec cela, qu’avec des frameworks CSS basés sur des composants.
Si vous avez lu d’autres de mes articles, vous savez où je veux en venir.
Ok, alors quel est le meilleur framework CSS ?
Pour moi, le meilleur framework dépend de 3 choses : le design, le temps, l’équipe.
- Si le design est commun / pas de design : Bulma ou Bootstrap
- Si le design est complexe et que j’ai du temps : Tailwind CSS
- Si le design est complexe et que je n’ai pas le temps : Bulma + beaucoup de CSS personnalisés
- Si je dois créer un système de conception : Tailwind CSS
En fonction de la taille et des compétences de mon équipe, je ne choisirais pas le même outil, et dans de très rares occasions, je ferais du CSS à partir de zéro.
Comme vous pouvez le constater : il n’y a pas de framework parfait dans toutes les situations.
Pour la plupart des scénarios tels que les applications Web, les tableaux de bord d’administration et les pages d’accueil courantes, un framework basé sur des composants comme Bulma est parfait.
Pour les pages de destination spécifiques ou les pages/applications Web très axées sur le design, un framework axé sur l’utilité comme Tailwind est parfait.
Ok, pourquoi Bulma plutôt que Bootstrap et les autres ?
- Foundation est vieux et le design par défaut est plus difficile à personnaliser.
- La partie JS de Bootstrap 4 repose sur jQuery, mais la v5 semble prometteuse.
- Skeleton et Milligram sont beaucoup trop basiques pour la plupart des projets.
- Materialize est trop influencé et un peu dépassé.
Bulma PROS :
- Il dispose de nombreux composants pour la plupart des cas
- Il est propre par défaut et assez facile à personnaliser avec SASS.
- Il possède son propre ensemble de classes utilitaires, donc le meilleur des deux mondes.
- Vous ne chargez que ce dont vous avez besoin et il est facile de l’étendre.
- La documentation est claire et facile à lire (important).
Bulma CONS:
- Tout n’est pas personnalisable. Dans certains cas, il est nécessaire d’effectuer des substitutions CSS.
Pourquoi utiliser Tailwind plutôt que des éléments comme Styled-components par exemple ?
Tailwind CSS dispose d’une excellente documentation et s’améliore constamment !
Ils ont ajouté des gradients CSS, des grilles natives et des transformations aux classes utilitaires, ce qui semblait impossible au départ en raison du nombre de combinaisons possibles.
Tailwind CSS est également à l’origine de nombreux modèles préconstruits, comme l’interface utilisateur officielle de Tailwind, entre autres.
CSS-in-JS ou les cadres CSS atomiques comme Styled-components et ACSS.io, ne ressemblent pas du tout à CSS. Les performances sont toutefois un peu meilleures, car ils créent la feuille de style à la volée sur la base de ce que vous écrivez.
Mais je préfère la séparation des préoccupations à une performance légèrement meilleure.
Les autres frameworks utilitaires que j’ai essayés, comme Tachyons, ne sont pas assez naturels. Tailwind m’a semblé le plus naturel et le plus convivial pour les développeurs.
Inconvénients de Tailwind :
- La compilation peut être lente lorsque votre projet se développe, mais le nouveau compilateur JIT devrait résoudre ce problème.
- Il n’est pas du tout adapté si vous créez des applications qui doivent générer des CSS personnalisés comme Canva ou des constructeurs de modèles granulaires comme Webflow.
Conclusion
Bulma est pour moi le meilleur framework CSS basé sur des composants, mais je ne l’utiliserais pas pour des designs spécifiques ou pour créer mon propre kit d’interface utilisateur ou système de design.
Tailwind est pour moi le meilleur framework CSS atomique/utilitaire si vous avez besoin de créer votre propre kit d’interface utilisateur, système de conception ou pages spécifiques à une conception.
Dans les deux cas, il faut quand même écrire un peu de CSS pour les projets de taille moyenne à grande. Il n’y a pas de solution miracle.
Bootstrap v5, qui est actuellement en version bêta, semble très prometteur avec son propre ensemble d’icônes SVG,
J’espère que cela rend le monde CSS un peu plus clair pour vous.
Source : ITNEXT