Dans le monde du développement front-end, on parle beaucoup des frameworks JavaScript. Rentrez dans une conversation entre plusieurs développeurs front, et vous risquez d’assister au débat éternel : quel framework choisir : Vue.js, React ou Angular ?
En revanche, et c’est pourtant tout aussi important, vous entendrez beaucoup moins parler des frameworks CSS. Parfois parce qu’ils sont reniés par les développeurs freelance (souvent à raison), mais aussi parce qu’on a tendance à toujours utiliser le même, et donc à ne jamais se poser la question sur leur utilité et vers lequel il vaut mieux se tourner.
Alors, est-ce vraiment utile d’utiliser un framework CSS ? Dans quels cas en utiliser un ? Et dans quels cas les éviter ? Et d’ailleurs, qu’est-ce qu’un framework CSS, au fond ?
Dans cet article, nous allons répondre à toutes ces questions.
Frameworks CSS : définition, utilisation
Un framework CSS, qu’est-ce que c’est ?
Un framework CSS, comme un framework JavaScript, est une librairie qu’on importe dans un projet de développement, qui contient un ensemble de composants et fonctionnalités, censés aider au développement front-end.
Typiquement, il vient généralement avec un système de grid (pour du responsive), et tout un tas de composants et de thèmes (boutons, headers, containers, etc.), simplifiant la construction d’une interface front.
Il vient parfois aussi avec du code JavaScript, lui donnant plus de possibilités et lui permettant de gérer les interactions avec les utilisateurs via des évènements (clic, swipe, etc).
Faut-il utiliser un framework CSS ?
Bien qu’un framework CSS puisse être une aide intéressante dans un projet de développement, il n’est pas toujours utile d’en utiliser un. Au contraire, cela peut même parfois desservir un projet.
Voyons dans quels cas il est bon de se servir de ce type d’outils, et quand il vaut mieux les éviter.
Quand utiliser un framework CSS ?
Il existe plusieurs cas pour lesquels utiliser un framework CSS peut être une bonne idée (cela ne veut pas dire que c’est obligatoire !).
Déjà, si vous êtes développeur back-end, vous n’avez pas ou peu de connaissances en développement front-end, utiliser un framework est une solution. Bien qu’il soit toujours utile de vous former un minimum au développement front, il est possible que vous n’ayez ni le temps, ni l’envie.
Dans ce cas-là, c’est légitime.
L’autre principal cas qui peut vous pousser à utiliser un framework CSS sans que ça pose problème, c’est lorsque vous devez coder rapidement un POC (proof of concept). C’est à dire, faire une démo, construire un début de produit rapidement pour démontrer que ça peut fonctionner. Dans ce cas, c’est aussi une bonne idée d’utiliser une librairie CSS, à condition que cela ne vous oblige pas à la garder lorsque vous partirez sur le développement à proprement parler.
Quand ne pas utiliser de framework CSS ?
S’il existe de bonnes raisons pour utiliser un framework CSS, il en existe aussi pour lesquelles il faut les éviter !
Par exemple, si vous devez intégrer une maquette fournie par un graphiste. L’utilisation d’une librairie risque de vous handicaper plus qu’autre chose, car il faudra jouer avec les classes et les styles déjà définis… Autant écrire le CSS vous-même.
Autre cas d’utilisation qui ne justifie pas l’utilisation d’un framework, c’est si vous avez seulement besoin d’un des éléments dudit framework. Certains développeurs utilisent toujours aujourd’hui Bootstrap pour son système de grid. Il était efficace il y a quelques années, mais maintenant, le CSS gère très bien tout ça nativement. Prendre un framework juste pour une ou deux fonctionnalités, ça revient souvent à alourdir le projet sans raison. Dans ce cas-là, autant se débrouiller par soi-même, ou alors trouver une librairie spécialisée dans ce type de problématique.
Quelques exemples de frameworks CSS
Maintenant qu’on a vu ce qu’était un framework CSS, dans quels cas l’utiliser ou non, voyons quelques exemples des librairies les plus connues. Ainsi, si vous avez déjà fait votre choix d’en utiliser un, cela vous aidera à décider lequel !
Bootstrap
Bootstrap a été l’un des premiers frameworks CSS. Créé par Twitter, la librairie a commencé à être utilisée par le grand public notamment parce qu’elle mettait à disposition un système de grid, permettant aux développeurs d’adapter facilement des composants aux différentes tailles d’écran.
Mais, comme déjà expliqué dans cet article, CSS propose aujourd’hui nativement cette fonctionnalité, via les grid ou flexbox. Bootstrap a donc perdu une partie de son intérêt, mais le fait qu’il propose un éventail complet de composants le rend toujours attractif aux yeux des développeurs.
Attention toutefois, Bootstrap est assez rigide, c’est à dire qu’une fois importé, il est difficile de facilement personnaliser les différents composants qu’il propose.
Tailwind
Un autre framework CSS qu’on peut citer, plus récent cette fois, c’est Tailwind CSS. Un des éléments qui différencie Tailwind d’autres frameworks comme Bootstrap, c’est l’utilisation de classes utilitaires à la place de classes sémantiques.
Qu’est ce que cela veut dire ? Eh bien, que les noms des classes, au lieu d’être sémantiques (définies par un mot ou un ensemble de mots), décrivent réellement ce que fait la classe, leur utilité.
Voici un exemple :
En haut, c’est du Boostrap, du sémantique, le style appliqué sur le lien est celui défini dans les classes btn et btn-primary. En dessous, avec Tailwind, on retrouve le même style, mais cette fois défini de façon utilitaire. Cela peut sembler plus barbare, mais au moins, on sait exactement de quoi il s’agit quand on lit ces lignes, sans forcément connaître le framework.
Foundation
Foundation est, comme Bootstrap, un framework CSS basé sur la sémantique. Son point fort est qu’il est très complet, personnalisable. Maitrisé, il peut être une formidable aide pour construire tout le front d’un projet web.
Cependant, sa force fait aussi sa faiblesse. En effet, il est tellement complet qu’apprendre à s’en servir devient parfois complexe. On peut facilement se perdre dans sa documentation et devant le panel de fonctionnalités qu’il propose.
Pour un débutant qui veut faire simple, Foundation n’est pas forcément le framework CSS à choisir en premier.
Semantic UI
Lorsqu’on parle frameworks CSS, Semantic UI revient aussi souvent dans la liste. Comme son nom l’indique, on a là aussi à faire à du CSS sémantique, c’est à dire avec des classes qui définissent l’élément plus que son utilité.
Cependant, il se distingue de Bootstrap par sa sémantique un peu plus simple à lire, plus claire. On remplace tous les mots composés comme ‘btn-primary‘ par des noms de classes complets et séparés, comme ‘primary button‘. Un peu plus simple, donc.
Mais Semantic UI se distingue également car il propose plus de 3000 variables de thèmes différentes (comme les couleurs).
Bulma
Le dernier framework CSS dont nous allons parler ici, c’est Bulma. Bulma est une librairie assez récente, mais qui a su se faire une place assez rapidement.
Bulma est, on pourrait dire, assez similaire à Bootstrap. Cependant, plus jeune, il n’a pas reproduit les erreurs du géant. Il se veut plus simple, à apprendre comme à utiliser, et plus léger.
Il embarque certes moins de composants et de fonctionnalités que les autres frameworks cités ici, mais c’est au contraire son minimalisme qui est appreciable et qui vaut le coup qu’on l’essaye.
J’espère que cet article vous aura aidé à y voir plus clair sur ce qu’est un framework CSS, quand l’utiliser et lequel choisir.
En avez-vous déjà utilisé certains ? Quel est votre favoris ? Dites-le en commentaire !
