Aujourd’hui, je me permet de vous exposer mon point de vue sur les frameworks CSS. Avantages, inconvénients, je vais essayer de tout détailler ici.

Rappel sur les frameworks CSS

Apparus il y a déjà pas mal d’années et rendus célèbres notamment grâce à Bootstrap, les frameworks CSS ont été créés pour accélérer le développement front-end et améliorer la maintenance des sites, en utilisant des classes réutilisables.

Leur succès est également dû aux navigateurs obsolètes (comme Internet Explorer). Il suffit alors d’importer un ‘reset.css’ et comme par magie, tous les navigateurs se comportent de la même manière sur votre site.

Différents types

Comme pour tous les langages, il existe plusieurs types de frameworks CSS :

  • Les complets : Comme Bootstrap, ils s’occupent de tout : Boutons, menus, typographie, formulaires, responsive, … Ces librairies donnent rapidement un look complet à votre site web en fournissant des tas de gadgets. Il faut cependant pas mal de temps avant d’assimiler toutes les possibilités et comment les mettre en place.
  • Les rapides : Ceux-là ne s’occupent que de l’essentiel : Positionnement, responsive, formulaires et typographie.
  • Les grilles : Plus légers, ils ne s’occupent que du coté positionnement et généralement de l’affichage sur mobiles/tablettes. KNACSS en est un bon exemple, même si les possibilités ont tendances à grandir au fil des versions.

Tous ces frameworks ont tout de même des avantages et des inconvénients, c’est ce que nous allons voir.

Avantages

Toutes ces librairies offrent plusieurs avantages intéressants à ne pas négliger. Je vais passer rapidement dessus. Étant donné que je pars du principe où vous ne dormiez pas dans une grotte cette dernière décennie, je suppose que vous les connaissez 😉

  • Rapidité : Pour un développeur back-end, le fait de pouvoir mettre en place un design en 10 minutes est vraiment intéressant, surtout s’il n’est pas à l’aise avec le CSS.
  • Responsive : Pratiquement tous proposent d’afficher correctement votre site sur mobile en ajoutant quelques noms de classes.
  • Design : Pour les frameworks qui incluent un design sur les menus, formulaires etc, ceux-ci sont généralement en accord avec les tendances actuelles.
  • Reset CSS : Malgré le fait que tous les navigateurs actuels soient respectueux des standards, il subsiste quelques internautes ne souhaitant pas (ou n’ayant pas la possibilité) évoluer vers des versions plus récentes. Le fait de rendre compatible tous ces navigateurs est un bon point bien sûr.

C’est vrai que tout cela a de quoi ravir un dév. Pouvoir prioriser le fonctionnement du site sans pour autant négliger le design, c’est assez tentant ^^

Inconvénients

Voilà la partie intéressante ^^ Tous ces frameworks possèdent des gros points négatifs à mes yeux, en voilà les principales :

Lourdeur et sémantique

Tout d’abord, je trouve que couplé à un framework CSS, le code HTML en devient beaucoup trop lourd. Voici un code extrait de MaterializeCSS :

WTF ? Toutes ces classes définissent uniquement le comportement des div sur les types d’écran, on a pas encore intégré le design..
A mon sens, ce nommage est contraire à la sémantique de CSS : Il ne faut pas utiliser des classes comme un comportement spécifique, mais nommer ses classes en fonction de ce qu’elles représentent.

Un autre exemple du même genre :

Là encore, la classe “red” n’est pas adaptée et est sémantiquement incorrecte. Si l’on souhaite qu’un bouton soit rouge parce qu’il annule une action, voilà un meilleur exemple :

Ici, le code est plus clair, et bien plus maintenable. Mais pour autant, ça n’est pas beaucoup mieux..

Sémantique, le retour

Dans le dernier code, n’y a t-il rien qui vous choque ? Les frameworks CSS donnent de mauvaises habitudes, notamment au niveau de la sémantique HTML. Avec HTML5, nous avons vu apparaitre des éléments comme les “nav”, “sidebar”, “article”, .. Pour autant, ce n’est pas un réflexe pour tout le monde, et je pense que ces outils en sont la principale raison.

Dans le code plus haut, ne serait-il pas mieux de remplacer le “input” par un “button” ? Bien sûr que si. Mais avec certains frameworks, si jamais je transforme mon code ainsi :

Mon bouton n’est plus pris en charge, ce qui pousse à ne pas utiliser les éléments comme il le faudrait.

Un autre exemple, vu je ne sais plus où :

Ici, un élément “nav” n’aurait-il pas plus sa place qu’un “div” ? Clairement, si. Mais la possibilité de planter le design est fort si on ne respecte pas à la lettre la doctrine que nous impose le framework. Et je ne parle pas encore de ceux qui modifient le DOM par Javascript..
En fait si, parlons-en.

jQuery

Mettons les choses à plat : Je n’ai rien contre jQuery. Au contraire. N’étant pas un grand passionné de JS, cette librairie me fait gagner énormément de temps. Mais les frameworks en abusent..

Il y a une pratique que je n’apprécie pas dans tout cela, c’est la manipulation du DOM pour le design : On ajoute des classes avec jQuery, des icônes, des divs, etc afin de donner à l’utilisateur du framework moins de code à taper.
Mais que se passe t-il si l’utilisateur a désactivé Javascript dans son navigateur (ça existe..) ? Le site devient alors moins joli, moins fonctionnel, allant parfois jusqu’à rendre la navigation impossible..

Et pour en revenir à ce que je disais au dessus, si vous transformez un <div class="menu">  en <nav> , soyez sûr que votre joli menu déroulant transformé par JS ne déroulera plus rien du tout..

Maintenabilité et évolution

Reprenons notre exemple du bouton rouge. J’imagine alors que dans tout le site, on a des <input class="button red"> .
Puis la mode évolue, vous souhaitez alors modifier votre thème, et remplacer la couleur rouge de votre bouton par du bleu. Comment allez-vous procéder ?

La première solution est de passer tous vos input en class="blue" . Ça en fait du taf, pas génial..

L’autre solution plus rapide est de modifier directement la classe “red” dans le CSS, et lui appliquer un background bleu. Pas très logique tout ça..

Là où je veux en venir, c’est qu’avec le nommage qu’impose les frameworks CSS, il devient vite très fastidieux de faire évoluer son site. Et ne croyez pas que cela s’arrête aux choix des couleurs, il en va de même pour les tailles (  <span class="col-6">  ) et d’autres éléments..

Mon site ressemble à celui du voisin !

Un autre inconvénient des frameworks CSS (ceux qui proposent un design prêt à l’emploi) est qu’au final, tous les sites créés avec le même outil ont la même allure. Même si le thème vous plait, on a au final un tas de site sans identité visuelle, qui ne marque pas le visiteur et qui, l’air de rien, laisse un aspect assez immature..

Bien sûr, vous avez possibilité de le modifier ou changer de thème. Mais avouons-le, un site sous Bootstrap modifié aura toujours une allure de Bootstrap..

Bashing gratuit ?

Non. Il ne s’agit pas du tout de dénigrer les utilisateurs des frameworks CSS ni même les auteurs, mais simplement vous donner une réflexion personnelle sur leur utilisation. J’en ai utilisé, j’en suis revenu. Et vous ? 😉