Utiliser un préprocesseur CSS ? ⏰

(Dernière mise à jour: 13 avril 2020)

Est ce que je dois utiliser un préprocesseur CSS ? Quand est ce que je dois le faire ?

C’est des questions que je reçois souvent en privé et on va y répondre rapidement dans cet article.

Un préprocesseur CSS, qu’est ce que c’est ?

C’est un outil de développement, qui va nous permettre de générer du CSS à partir d’un fichier qui contient de nouvelles fonctionnalités.

On va donc installer un préprocesseur dans notre dossier puis utiliser ces fameuses fonctionnalités dans un fichier spécifique à celui-ci.

Ensuite ce fichier va être compilé en pur CSS !

Notre site va ensuite utilisé ce fichier CSS compilé, c’est aussi simple que cela.

Mais qu’elles sont ces fonctionnalités ? 

Les plus courantes sont :

  • Les mixins, ce sont des bouts de code réutilisables.
  • Les variables, même si elles sont maintenant aussi disponibles nativement.
  • Le nesting, c’est à dire la possibilité d’imbriquer des sélecteurs si ceux-ci sont imbriquer dans notre HTML.
  • Utiliser des fonctions
  • Des boucles(for, while), des conditions(if,else)
  • Des alertes, des warnings pour s’aider dans notre développement
  • Etc …

Ces fonctionnalités ne vont pas nécessairement générer moins de code in fine, mais elles permettent de coder plus rapidement, en réutilisant du code(mixins par ex), ou en codant beaucoup de code d’un coup(avec une boucle).

Mais alors, dois-je utiliser un préprocesseur ?

On peut s’en passer de ces derniers pour des petits projets, mais ils deviennent vite très utile lorsqu’on entreprend de coder des sites massifs.

Le gain de temps est certain.

Néanmoins il faut évidemment passer par une phase d’apprentissage, relativement rapide.

Mais alors, quel préprocesseur CSS utiliser ?

C’est vrai qu’il en existe une flopée, mais certains ont fait leur preuves.

Je vous conseille de vous tourner vers SASS, qui est vraiment celui qui a pris l’ascendant sur ces concurrents, c’est bien-sur gratuit et bien documenté.

Mais si vous voulez faire les rebelles à contre courant, il y a « stylus », « less », « postCSS » etc …


Voila pour ça, vous êtes paré à utiliser ces outils 🙂

Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/categorie/formation/

Vous pouvez également nous retrouver sur Youtube :

Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q

Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA

On se donne rendez-vous très vite pour un article autour du dev web, ciao !

Laisser un commentaire

Votre adresse email ne sera pas publiée.

Votre adresse email ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.