• A la une
  • Catégories
  • Dossiers
  • +

Petit guide d'utilisation des pré-processeurs CSS #1

par Benjamin SANCHEZle 14/03/2017

Besoin d'aide pour comprendre les préprocesseurs CSS ? Cet article est exactement ce qu'il vous faut ! De la définition même d'un préprocesseur CSS aux bases de l'algorithmique en passant par des conseils et une liste de ressources, cet article possède tout ce dont vous avez besoin pour bien comprendre et utiliser les préprocesseurs CSS.

Qu'est-ce qu'un pré-processeur 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 !

Les post-processeurs

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é.

Pourquoi les comprendre et les utiliser

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.

Pourquoi s'en méfier

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).

Comment commencer à les utiliser ?

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.

Quelques exemples de pré-processeur

Bon, sans plus de surprises, je vais vous proposer ici les "trois grands" que sont Sass, Less et Stylus. Sachez néanmoins qu'ils sont les tous les trois pour vous permettre de reconnaitre leur logo et leur nom si vous les croisez plus tard. 

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.

Sass

Less

Stylus

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir