Petit guide d’utilisation des pré-processeurs CSS

En quelques mots, un pre-processeur CSS est un outil qui permet de créer du CSS à partir d'un autre langage. Comme son nom l'indique, c'est un outil qui se place avant (pre) le traitement (processing) de votre CSS, c'est-à-dire avant qu'un navigateur lise et utilise votre CSS pour styler une page.

Leur rôle est de simplifier la vie et le travail des intégrateurs en leur fournissant de nouvelles fonctionnalités ou des "sucres syntaxiques" (quelque chose qui ne modifie pas le fonctionnement d'un langage, mais le rend plus simple à lire ou a écrire). 

Attention néanmoins, quand je parle de nouvelles fonctionnalités, gardez bien en tete que le résultat final (le fichier que vous donne le pre-processeur) est un fichier CSS. Les nouvelles fonctionnalités offertes le sont donc pour vous le créateur du CSS, et pas pour les visiteurs qui verront le résultat dans leur navigateur (puisque de toute manière, les navigateurs ne comprennent que le CSS).

Comme exemple de fonctionnalité offertes, il est possible de créer automatiquement des sprites à partir de fichiers que vous avez mis dans un dossier, créer des variables pour simplifier l'édition et la relecture de votre code, ou créer des "mixins" pour simplifier et automatiser certaines portions de votre code repetitive. Enfin, le plus gros ajout des préprocesseurs CSS est selon moi qu'ils offrent les outils nécessaires à l'algorithmique : for, if, while. 

Vous ne savez pas ce qu'est l'algorithmique ? Rendez-vous demain pour un article dédié a ce sujet !

Juste quelques mots histoire d'avoir abordé le sujet : il existe aussi des "post-processeurs" (comme PostCSS par exemple).

Leur nom est particulièrement trompeur car non, ils ne sont pas utilisés après le traitement du CSS par le navigateur, mais simplement après les pri-processeurs. (si vous voulez un exemple de ressource qui fait vraiment du "post processing", je vous conseille de regarder Prefix-free)

Leur particularité est qu'ils s'utilisent comme point de départ un fichier en langage CSS qui pourrait être considéré comme "utilisable tel quel", mais que l'on veut modifier et "améliorer". Auto-prefixer par exemple est certainement le plugin PostCSS le plus connu, il permet d'ajouter automatiquement les différents préfixes nécessaires au support des navigateurs que vous lui aurez demandé.

Comme je l'ai dit plus haut, les préprocesseurs sont de formidables outils, extrêmement puissants pour ceux qui savent les manipuler et pouvant rendre bien plus agréable le travail d'intégration.

Bien que le résultat entre un CSS fait sans préprocesseur et un CSS fait avec préprocesseur n'est pas sans différer, ces outils permettent une meilleure organisation de son code ainsi que l'automatisation de nombreuses taches et tests, ce qui permet de fournir un CSS plus propre, stable et "logique".

Enfin, c'est un outil supplémentaire qui vous aide dans votre travail, tout comme l'est votre éditeur de texte ou votre navigateur, et en tant qu'artisans du web, nous nous doivent de comprendre et savoir utiliser nos outils. Se dire "non, je peux faire sans" serait comme si un graphiste décidait qu'il ne veut pas apprendre à utiliser les différents calques sur Photoshop, parce que cela ne se voit pas sur le résultat final.

Les préprocesseurs sont un formidable outil, mais cela ne veut pas dire qu'ils sont un outil à tout faire et qu'ils faut les utiliser de partout. Même le marteau le plus formidable du monde ne pourra vous aider à visser proprement.

De plus, il faut bien se dire que les préprocesseurs ajoutent une couche d'abstraction supplémentaire, et que cela nous éloigne d'autant du CSS "final" que verra le navigateur. Or, il ne faut jamais quitter le résultat CSS des yeux. Une petite ligne anodine dans un fichier SASS par exemple peut ajouter une centaine de lignes dans le résultat en CSS par exemple, et parfois plus.

De manière générale, je dirais qu'il ne faut pas se méfier des pre-processeurs eux-mêmes mais de leurs utilisateurs, vous compris. Quand vous voyez ou écrivez du sass, demandez-vous à quoi va ressembler le CSS résultant de votre code, et demandez-vous si vous n'aviez pas une possibilité plus économe. Mettez-vous des barrières et respectez les scrupuleusement (pas plus de 3 niveaux d'indentation, pas d'héritage de plus de 6 lignes, etc.).

En enfin, rappelez-vous que les préprocesseurs sont un outil vraiment très puissant et qu'un grand pouvoir implique de grandes responsabilités (et ça ce n'est pas des conneries c'est l'oncle Ben qui l'a dit).

Vous avez choisi votre préprocesseur, avez lu sa documentation, et vous vous sentez prêt, mais ne savez pas par où commencer pour vos tests ?

Chaque préprocesseur propose un petit outil en ligne de commande pour "compiler" les fichiers d'origines en fichiers CSS, mais il est possible que vous ne soyez pas réellement à l'aise avec ce genre d'outils et que vous préfériez un outil graphique.

Si vous êtes dans ce cas, je vous conseille de jeter un oeil à Koala, qui est un très bon outil disponible pour Windows, Macs et Linux, et qui vous aidera à compiler vos fichiers.

Bon, sans plus de surprises, je vais vous proposer ici le pré-processeur Sass.

Si vous n'avez jamais utilise de préprocesseur, prenez Sass dans sa syntaxe SCSS pour commencer. C'est le plus simple, le mieux maintenu, le plus rapide et celui avec la plus grande communauté. Et comme vous pourrez le remarquer, c'est aussi le seul avec un lien sur la miniature dans cet article.

Si vous avez vraiment envie d'en prendre un autre, faites le, mais au moins ce ne sera pas de ma faute.