Nautilebleu

Dive into my universe

Posts tagged sass

1 note &

Retour d’expérience sur Bootstrap

Parmi les technologies que doit manipuler le développeur web, les CSS étaient jusqu’à récemment la partie la moins “industrialisée”.
Pour le développement côté serveur, on dispose en effet de frameworks ( django, Ruby on Rails, symfony, etc.) depuis maintenant bien longtemps.
De même, côté client, où l’on dispose de bibliothèques ( Prototype, jQuery, Mootools) voir également de frameworks (SproutCore, Javascript MVC), voir carrément d’environnement qui étendent/remplacent Javascript ( Cappucino, Google Web Toolkit, CoffeeScript).

Pour les CSS, on disposait jusqu’à récemment de systèmes de grilles avec un reset (Blueprint, 960.gs). Mais dernièrement Twitter Bootstrap et Zurb Foundation se sont positionnés comme des frameworks, dans le sens où ils se proposent de répondre à l’ensemble de besoins : ils fournissent un système de grille, un jeu de typographie, des boutons, des barres de navigation, etc., le tout avec en utilisant un langage intérmédiaire (LESS pour Bootstrap, SASS pour Zurb.)

Le succès est venu rapidement, notamment pour Bootstrap, ce qui a causé une certaine lassitude pour tous les sites qui utilisent Bootstrap sans le personnaliser.

Dernièrement, j’ai eu l’occasion d’utiliser Bootstrap à la fois dans un contexte professionnel, avec le lancement de la première brique de la version mobile de Greenbureau, et dans un contexte personnel, avec la conception du site des rencontres djangobreizh à venir. C’est notamment ce travail mené avec Florian Strzelecki, qui a rapidement développer une allergie à bootstrap/LESS.

Je me propose donc de faire un rapide retour d’expérience sur Bootstrap et LESS, sachant que ce n’est pas un comparatif avec Zurb/SASS, que je n’ai pas encore utilisé.

Les points positifs

A Greenbureau, nous utilisons beaucoup bootstrap pour du prototypage. En ce sens, bootstrap permet quasiment de se passer de l’étape de wireframing avec un outil comme balsamiq pour proposer non pas un visuel statique mais un prototype interactif. Cela permet en particulier de se rendre compte que certaines UI qui semblent fonctionner sur le papier peuvent être grandement améliorées une fois rendues dans le navigateur.
Evidemment, ces prototypes n’ont pas vocation à être mis en production sans une phase de personnalisation.

Mais l’intérêt de bootstrap ne s’arrête pas là : comme tout framework, bootstrap propose de normaliser le HTML et le CSS, à la fois en proposant un ensemble de noms évocateurs ("Naming things is hard.") et en promouvant les bonnes pratiques. J’écris bien normaliser et non standardiser, car il s’agit du travail effectué par les développeurs de Twitter et non de l’effort du W3C.
En ce qui concerne les bonnes pratiques, ce dernier point doit cependant être pondéré par la volonté de bootstrap d’être compatible avec le maximum de navigateurs (oui Internet Explorer, c’est à toi qu’on pense !)
Du coup, bien que bootstrap se présente comme un framework HTML5, en fait il a une certaine propention à la divite, et l’on se retrouve souvent à imbriquer des <div> là où une balise HTML5 aurait été porteuse de plus de sens sémantiquement. Comme tout framework, il faut faire des concessions.

Les points négatifs

En allant plus loin dans les points négatifs, on trouve LESS. J’ai plusieurs reproches à l’usage de LESS.

Tout d’abord, tel qu’utilisé dans Bootstrap, si par exemple, vous avez besoin de modifier une couleur fournie par défaut, vous avez 2 options :

  • soit vous éditez le fichier variables.less, mais alors, si vous avez récupéré bootstrap en clonant de dépôt sur github, vous aurez un conflit à chaque update.
  • soit vous créez un fichier local.less qui n’appartient pas à bootstrap, et vous importez les fichiers qui vous intéressent. Mais vous devrez réimporter toutes les définitions de style qui utilisent votre couleur pour que cette nouvelle valeur soit prise en compte.

Là, je pense que Bootstrap ne va pas assez loin dans la démarche et devrait prévoir dès le départ la personnalisation.

Autre point : LESS est écrit en JS. Pour compiler, il faut installer node.js, puis npm puis less. Ensuite, soit vous voulez livrer un fichier statique et vous devez mettre en place un mécanisme pour générer le fichier .css à chaque fois que vous committez le .less. Soit vous devrez mettre en place un serveur node en production (…) Pour l’instant la seule alternative est SASS qui est en ruby. Bref, il manque pour nous qui utilisons Python un parser less ou SASS (voir autre chose si ces langages s’avèrent trop limités.)
En fait, je pense qu’il faudrait rédiger une specification pour un langage de génération dynamique de CSS, pour ensuite permettre des implémentations dans chaque langage, à l’image par exemple de Markdown… A partir de là, il serait possible de concevoir différentes intégrations dans des frameworks. Car aujourd’hui, on ne peut choisir bootstrap et SASS par exemple (il existe bien un fork, mais je ne suis pas sûr que ce soit simple à maintenir et donc à jour et que le résultat soit 100% compatible.)

Conclusion

En fait je pense que nous sommes aux prémisses de cette façon de travailler, avec des outils de génération dynamique de CSS. A moins que tout simplement ce ne soit pas utile, si on arrive à avoir des variables en CSS assez rapidement. Actuellement, bootstrap me fait penser à php nuke : les sites produits avec ce vétéran avaient tous tendance à se ressembler (ahh, la fameuse mise en page en 3 colonnes…) et pour étendre le code, il faut modifier le code lui-même.

PS : je n’ai lu l’[article d’Exirel][_exirel_post] qu’après avoir rédigé le mien, afin de ne pas être influencé. Toutefois, je vois qu’on se rejoint sur de nombreux points, même si je suis moins polémique dans le ton (mais il a publié un #trolldi, lui !)

PS2 : Exirel a fait un deuxième article où il détaille son point de vue. Nous restons en phase.
Dans le même registre, vous pouvez également lire le compte-rendu sur la conférence "Using CSS preprocessors effectively" de Jonas Wagner rapportée par Reinout van Rees à la djangocon.eu (en Anglais).

Filed under twitter bootstrap zurb foundation less sass css ui ux