Le CSS et moi, c’est une longue histoire d’amour.

Historiquement, c’est le deuxième langage que j’ai appris, en 98, juste après html et juste avant JavaScript.

Et encore maintenant, l’intégration reste l’une de mes spécialités et donc l’un de mes gagne-pain en tant que freelance.

De CSS à PHP

Quand j’ai commencé à apprendre les langages de développement avec JavaScript puis PHP, j’ai assez vite voulu utiliser en CSS les avantages des variables, boucles et autres structures de contrôle…
Malheureusement, à l’époque, on ne parlait pas encore de preprocesseurs, et le plus simple, c’était de passer par PHP.

C’est ainsi que dans le cadre d’un de mes premiers jobs en agence, j’ai développé un script php qui gênerait les feuilles de style d’un cms de manière dynamique, en utilisant des palettes de couleurs stockées en base de donnees et personalisables par le client à travers une interface d’administration.

C’était sympa, mais assez lourd à mettre en place, pas toujours pratique, peu lisible, et au final vraiment anecdotique.
Ça a d’ailleurs été assez vite abandonné par l’agence en question après mon départ de l’équipe… et je ne leur en veux pas, j’ai fini par le faire aussi de mon côté.

De PHP à less

Bon, plutôt de CSS à less, puisque la génération de feuilles de styles en PHP fût assez vite abandonnée, mais bref.
Je l’avoue, je ne me rapelle plus du tout comment j’en suis venu à utiliser less.
J’ai toujours vainement cherché à utiliser des variables et des structures de contrôle en CSS, mais j’avais fini par en faire mon deuil, en attendant l’implementation, dans dix ans au moins, des spécifications officielles des variables CSS dans tous les navigateurs…
Puis je suis tombé sur less et j’ai découvert le paradis dont je rêvais : variables, fonctions (qu’on appellait à l’époque mixins, on fera la distinction entre les deux dans les versions plus récentes de l’outil), imbrication des sélecteurs… le rêve.
En découvrant less, j’ai aussi découvert l’application mac less, développée par Bryan Jones, qui allait un peu plus tard la faire évoluer sous la forme du genialissime CodeKit.

Et pendant quelques années, j’ai utilisé less dans tout mes développements.

De less à Sass

J’ai découvert Sass en 2012, suite à quelques articles sur mes blogs favoris, et j’ai premièrement pas énormément aimé : plus de point-virgules, plus d’accolades, on est où, là ?
Mais Sass avait deux syntaxes distinctes : Scss, très proches de less et de CSS, et Sass, la fameuse syntaxe indentée qui me rebutait tant… Après quelques mois d’utilisation heureuse de Scss et de la librairie Compass, j’ai profité de mon adoption de coffeescript pour reconnaître que la syntaxe indentée, c’est quand même juste plus clair, plus propre, plus…mieux, en somme.
Et donc, d’à peu près l’automne 2012 à décembre 2013, j’étais un farouche défenseur de la syntaxe indentée de Sass… jusqu’à ce que le soufflé retombe.

De Sass à Stylus

Sass, c’est génial, mais la communauté à l’air de beaucoup plus aimer Scss… Les goûts et les couleurs, soit… mais là ou ça devient gênant, c’est quand les développeurs annoncent que dans le futur, Scss sera la seule branche à évoluer, en espérant que d’autres contributeurs fassent vivre la syntaxe indentée…
Bon, ca, ça pourrait encore passer, mais le plus gros problème de Sass, c’est son compilateur, en ruby. Et ce compilateur est lent. Très lent. Très, très lent…

Et surtout, il est en ruby. Comprenons-nous bien : je n’ai rien de particulier contre ruby, mais je n’utilise jamais ce langage dans le cadre de mes développements web : j’utilise soit node.js, soit je développe en statique (généralement quand ma mission se limite à l’intégration seule d’un design).
C’est vrai que dans le cadre de ce second cas, je peux encore utiliser ruby qui est installé en natif sur mon mac, mais en fait, dans les deux cas, j’ai pris l’habitude de faire tout mes travaux dans des environnements virtuels grâce vagrant (j’en reparlerai à l’occasion d’un billet dedié), et dans ce cas, installer ruby sur une vm juste pour Sass, c’est un petit peu overkill.

Bref, ces deux raisons m’ont doucement fait perdre ma foi en Sass pour chercher une alternative plus proche de mes besoins, et cette alternative c’est révélée être Stylus.
Stylus est en effet très très proche de la syntaxe de Sass (et va même plus loin dans sa quête de simplicité en supprimant les deux points entre les propriétés et leurs valeurs), et surtout, il est entièrement interprété en JavaScript, ce qui en fait un outil de choix, qui s’intègre complément dans mon workflow.

---

Un petit mot pour conclure : ne soyez pas freiné par la syntaxe indentée : elle est certes bizarre à lire (au début), mais se révèle bien plus claire, et surtout bien plus propre : le langage vous oblige à écrire votre code proprement, et écrire son code comme un cochon n’est clairement l’apanage du bon developpeur…