Les frameworks css

Depuis le début des années 10, les frameworks css se sont popularisés. Mais qu’est ce que c’est, à quoi ça sert, et est-ce que ça sauvera la vie des développeurs front-end pressés comme des citrons par les boites de développement ?

Framework

Le terme framework (littéralement "cadre de travail") désigne un ensemble cohérent de composants logiciels structurels, qui sert à créer les fondations ainsi que les grandes lignes de tout ou d’une partie d’un logiciel (voir la suite de la définition sur wikipedia).
C’est un terme de développement logiciel, et une logique de travail guidé par l’industrie.
Plutôt que de créer son code css pour chaque projet, l’idée est ici de structurer les besoins habituels d’un site :
- la remise à zéro et uniformisation de css (des resetters)
- l’usage des typos (h1, h2, p, quote, etc.)
- la structure de la page (le système de grille)
- l’affichage spécifique des menus
- les formulaires et leurs boutons
- les médias queries pour l’adaptation au supports tablette et smartphone
- quelques autres gadgets typiques (galeries, sliders, etc.)

Et de placer l’ensemble de ces codes css utiles dans un fichier, avec une taxinomie cohérente (des noms évocateurs et courts), de penser leur interaction logique, de produire une documentation lisible et agréable. On obtient un outil rapide pour démarrer un site. Les frameworks plus ambitieux contiennent aussi des pages html de démo, et des codes javascript prêt à l’usage.

Un framework css est donc d’abord une feuille de style pré-écrite, que l’on télécharge et qui sert de développement d’un site web (on dit front-end pour le séparer du travail de développement php/mysql ou autres codes d’instruction).

La plupart des développeurs avec un peu de métier constituent intuitivement ce genre d’outil, mais le début des années 10 a marqué un tournant avec l’arrivée sur le web de plusieurs "frameworks css" structurés. Blueprint, 960 grid system, et puis Bootstrap et bien d’autres ont changé la manière de travailler.

Construire à l’envers : baser le html sur la css

Si le développement standard commençait par une structure html sur laquelle on applique des déclarations css, les frameworks font travailler les codeurs de manière opposée.
On charge le framework, et on développe le html en fonction des styles codés dans la feuille de style en s’aidant de la documentation.
Ceci veut dire que l’on associe de classes à des tags html. Cette approche nécessite, outre une connaissance générale du code css, une connaissance des styles du framework lui-même.
En Bootstrap, un bouton vert s’écrit comme ceci :

<button type="button" class="btn btn-success">Success</button>

Ceci produit un bouton vert qui s’assombrit lorsqu’on passe la souris par dessus. La couleur, taille et comportement ont été précodés dans la feuille de style. Ill faut donc apprendre les noms des classes et les endroits où ils peuvent être employés. Selon la complexité du framework, on aura une "courbe d’apprentissage" plus douce ou plus rude.

les avantages des frameworks

Les frameworks sont conçus dans une logique open-source, produits par des graphistes-développeurs pour des graphistes-développeurs. On peut donc faire confiance au fait qu’ils sont utiles. Ils permettent un prototypage rapide de maquettes web, et même un développement complet très rapide, une fois que l’on maitrise l’usage des classes précodées.
Ils permettent de rentabiliser l’effort de l’apprentissage sur un grand nombre de projets différents, de la page unique au site complet.
Ils permettent de partager des bouts de code, des templates html, des conseils et didacticiels entre confrères.
Il permet de mettre une compétence en plus dans son CV, identifiable par les professionnels du secteur.

Ils permettent en outre de maintenir la cohérence d’un site facilement, puisque la logique des tailles, des couleurs, des grilles est précodée et réemployée, et que le projet du framework évolue en fonction des grandes tendances, porté par des professionnels en équipe.

Désavantage des frameworks

Tout n’est pas rose évidemment. Il y a un revers à la médaille. On peut critiquer les frameworks CSS pour plusieurs aspects.
Il faut d’abord souligner que les frameworks ne répondent pas à tous les besoins graphiques d’un site. Il faut donc pouvoir personnaliser le code, et dans ce cas, écrire ses propres css qui vont interagir avec un code massif qui peut du coup paraître opaque et difficile à manœuvrer.
la lourdeur "physique" des frameworks est parfois invoquée pour les critiquer. Certains sont très légers (quelques dizaines de K) mais d’autres peuvent peser un méga et plus, alors que l’on n’en utilisera qu’une partie de ses capacités (pas de formulaire par exemple, ou une navigation personnalisée alors que des centaines de lignes du framework sont censées s’occuper de ça).
Les frameworks essaient de parer à la critique en se faisant personnalisables au téléchargement ou se centrant sur quelques choix (le système de grille et les boutons par exemple) mais on a parfois un bazooka pour tuer des mouches, c’est vrai.

Mais la critique la plus forte concerne la grande homogénéité que les principaux frameworks CSS produisent sur le développement web. Bootstrap, spécifiquement, a été sur-utilisé ces dernières années, jusqu’à énerver certains développeurs.

Enfin, un framework est un outil permettant de coder plus efficacement un site web. Or, un site web est un mélange de html, css et javascript, des langages disponibles et assez facilement appréhendables. Apprendre à coder à travers un framework spécifique qui sera démodé dans un an peut être un risque. Comment être sûr de ne pas perdre son temps, ou de perdre l’habitude d’écrire par soi-même du code et d’être perdu sans cet outil ?

Offre pléthorique

Les frameworks sont des outils produits par une communauté très vivante et en concurrence constante, ce qui est un peu épuisant à suivre. Il y a des effets de modes dans ce petit milieu et les killer apps se succèdent à grande vitesse. Ceci a pour conséquence une offre énorme dans ce domaine.

Plutôt que de citer une liste destinée à se ringuardifier dans les mois qui arrivent, il suffit de faire une recherche sur votre moteur préféré avec les termes "framework css" et de faire son marché.

Alors, utiliser un framework ou pas ?

L’utilisation d’un framework est une expérience intéressante dans le parcours d’un codeur, et comme évoqué, c’est une ligne intéressante à ajouter a son CV. Il est cependant utile de ne pas perdre de vue le code html et css fabriqué à la main, base du travail du développeur front-end. Il est possible de combiner des frameworks légers pour produire son propre outil, et parfois il est même plus aisé de produire, sur base de sa propre expérience, un ensemble de classes utiles de site en site, qui devient par la force des choses... votre framework.

Voir en complément l’article de Tétue sur son site, qui plaide pour la fabrication de son propre framework.