Ouvrez vos bras au changement, mais ne laissez pas s'envoler vos valeurs. – Dalaï Lama Tenzin Gyatso

Chez Shop Application nous avons plusieurs offres clients pour la création du site internet utilisé avec notre logiciel. Deux de nos offres consistent en la personnalisation d'un thème suivant la charte du client. En effet, chaque projet est unique mais est basé sur une structure commune de thème et personnalisé ensuite après l'étape de maquette pour correspondre à la charte du client.

Tout comme le logiciel qui a 15 ans maintenant, le système de template a connu quelques évolutions au cours des dernières années en terme d'organisation de fichiers.

Etat des lieux

"Après vous, c'est par ici..." Hum.

La partie CSS de chacun de nos thèmes est écrite avec uniquement un fichier de style qui contient tout le style du thème soit environ 10 000 lignes de CSS tout simplement quoi ^^.

Les évolutions et corrections du code CSS faites depuis la création des thèmes l'ont été par pleins de personnes différentes au cours des dernières années sans règles particulières d'écriture du code CSS. On arrive donc aujourd'hui avec un fichier aussi énorme de code, qui contient des parties dupliquées à certains endroits, d'autres qui n'ont plus lieu d'être mais qui n'ont pas été enlevées, des blocs de CSS écrits sur une seule ligne et d'autres blocs qui sont plus ou moins bien indentés… Bref un joyeux bordel de code finalement mais qui fonctionne tout de même depuis toutes ces années !

N'est-ce pas le principal finalement ? Avoir le rendu souhaité peu importe la manière ? On pourrait se dire que "Oui" étant donné que le CSS ne pèse pas lourd en comparaison des images et scripts sur un site une fois minifié.
Mais un autre problème se pose en revanche, celui de la personnalisation des sites pour nos clients car une de nos offres consiste à personnaliser le style des éléments sans (trop) toucher à la structure du thème. C’est-à-dire globalement, changer les couleurs, la typographie, les tailles de typographie et les images pour correspondre à la charte du client pour chaque projet un par un.

Autrement dit, pour chaque projet on change les couleurs, les typo, etc. aux mêmes endroits en repartant du thème de base et on modifie souvent un même élément qui est appelé à plusieurs endroits sur le site dans le code pour lui donner exactement le même style…

Après ce constat limpide apparaît à nous clairement le choix d'un refactoring du code CSS de nos thèmes !

Nos besoins

On veut un système qui nous permette de structurer notre code et surtout de ne pas réécrire à plusieurs endroits les mêmes propriétés CSS et respecter ainsi le principe "Don't Repeat Yourself" si cher aux développeurs. Bref un système pour avoir des thèmes plus unifiés dans leur code et dont ce code serait plus facilement maintenable et évolutif dans le temps.

Il est donc assez naturel de se pencher du côté des préprocesseurs CSS, qui répondent tous à ces problématiques.
Un éventail de préprocesseurs s'offre alors à nous et il nous faut faire un choix parmi les plus connus et utilisés dans le monde du web : Sass, PostCSS, Less, Stylus…

Un autre point important pour nous est de ne pas chambouler toute la manière d'écrire du CSS, je veux dire par là ne pas avoir quelque chose qui s'éloigne trop de la syntaxe CSS que tout le monde connait (de notre support technique à nos développeurs) pour que le temps d'apprentissage ne soit pas trop long et en rebute certains de s'y mettre.

Si on fait quelques recherches on s'aperçoit vite que le Sass est le plus populaire des préprocesseurs dû notamment à son utilisation dans les dernières versions des Frameworks CSS les plus connus, il bénéficie donc d'une grande communauté ce qui est un point positif pour son évolution dans le temps.

Et enfin, le dernier argument de poids en la faveur de Sass est justement notre volonté d'uniformiser toutes nos parties front (admin et templates) avec un seul et même Framework CSS écrit en Sass dont on parlera dans un prochain épisode ;) #no spoil

Et maintenant ?

On retrousse les manches, on prend une gorgée de café et on se lance dans le vif du sujet au prochain épisode !