Pré-processeur CSS : nos feuilles de styles faciles

Il y a déjà plusieurs mois trois ans (trois ans !!), j’avais écris un billet d’humeur à propos tout le foin que l’on faisait sur les pré-processeurs CSS et leur utilisation que je trouvais abusive.

À l’époque je n’avais testé que LESS, que je trouvais beaucoup plus accessible, moins compliqué à mettre en place en fait. J’avais aussi acheté le bouquin de Kaelig, CSS maintenables, que je n’ai d’ailleurs toujours pas commencé, trop occupé à lire Cinquantes nuances de Grey et autres Walking Dead …

Et puis aux alentour de la mi-juillet 2013, j’ai eu en charge la conception d’une plateforme intranet pour l’association luxembourgeoise Arcus asbl. Le projet était tellement conséquent que je me suis dis que j’avais peut-être enfin l’occasion me faire la main sur un pré-processeur CSS. L’année précédente, nous avions déjà conçu le site internet et avec le recul, vu la feuille de style, on aurait déjà pu utiliser un pré-processeur, ne serait-ce que pour avoir une meilleure organisation des règles CSS et les rendre encore plus maintenables.

L’arrivée de ce nouveau projet était donc le moment idéal pour vraiment me mettre aux pré-processeurs CSS. La première fois que j’ai eu l’occasion de jouer avec un pré-processeur CSS, je m’était arrêté sur LESS que je trouvais moins difficile à mettre en place à l’époque puisqu’on pouvait l’utiliser sans installer Node.js (ou Ruby pour Sass)  ni utiliser la ligne de commande pour compiler les feuilles de styles. Un simple fichier JavaScript à ajouté et c’était fini ! malheureusement je n’avais pas du tout accroché.

Je décidais donc que cette fois-ci, il était temps de sauter le pas ! Je me suis tourné vers Sass, qui m’avait un peu fait peur à cause de sa mise en place, que je trouvais fastidieuse à l’époque (obligation d’installer Ruby, installation via ligne de commande, etc.).

Et je ne regrette pas du tout d’avoir sauté le pas ! Utiliser un pré-processeur CSS a permis à mes feuilles de styles de gagner en lisibilité, d’être plus facile et plus rapide à modifier et surtout mieux structurées, ce qui me permet de générer plusieurs feuilles de styles partageant des règles communes, sans pour autant réécrire une seule ligne. Pratique.

Ces derniers temps j’ai notamment utilisé Sass et Compass afin de générer les feuilles de styles des différents templates d’impression utilisés dans notre application IBAKUS®KYC.

Si, comme moi à l’époque, vous êtes réticent à utiliser un pré-processeur CSS, essayez Sass et Compass sur un projet d’assez grande envergure, si vous en avez l’occasion, vous verrez qu’il vous simplifierons grandement la tâche.

Je pense d’ailleurs publier ici quelques petits trucs et astuces concernant Sass dans les prochaines semaines, histoire de relancer un peu le bousin.