Un pré-processeur est un outil

Il y a une résurgence d’articles récemment sur les pré-processeurs CSS :

• J’en peux plus de vos pré-processeurs, par Cyrilou
• Préprocesseurs, mais c’est de la CSS au fait !, par Nicolas Hoffmann
• Pourquoi je n’utilise pas les préprocesseurs CSS ?, par Vincent De Oliveira

J’avais déjà donné mon avis sur le sujet l’année dernière dans mon manifeste du CSS pur et dur. Il se trouve que depuis cet article, j’ai eu l’occasion de travailler sur un projet utilisant Sass. Mon avis n’a pas vraiment changé, mais mes craintes ont un peu changé de cible.

Le problème, ce ne sont pas les pré-processeurs en eux-même. Mais comme le dit très bien Roy Tomeij chez The Sass Way :

Sass ne crée pas du mauvais code. Ce sont les mauvais développeurs qui le font.

J’en parlais déjà l’année dernière, selon moi, la qualité d’une intégration se mesure sur trois objectifs (dans l’ordre) : l’internaute, le projet et moi. Le problème à mon avis, c’est qu’un pré-processeur incite à se concentrer totalement sur le dernier point (mon petit nombril d’intégrateur) en oubliant totalement le premier (l’internaute). Et le risque, c’est d’oublier totalement pourquoi on fait une intégration et de générer du code bouffi comme celui-ci :

a.icon-listen-bl:hover,
.event-related .box-title a:hover,
.category-related .box-title a:hover,
.readmore a:hover,
.footer a:hover,
.pagination a:hover,
.news a:hover,
.latest-tweet .date a:hover,
.feature .box-header .title a:hover,
.caption .title a:hover,
.full-agenda-link a:hover,
.article a:hover,
.medialib-nav a:hover,
.timeline-months a:hover,
.Timeline .feature .box-footer a:hover,
a.icon-listen-bl:active,
.event-related .box-title a:active,
.category-related .box-title a:active,
.readmore a:active,
.footer a:active,
.pagination a:active,
.news a:active,
.latest-tweet .date a:active,
.feature .box-header .title a:active,
.caption .title a:active,
.full-agenda-link a:active,
.article a:active,
.medialib-nav a:active,
.timeline-months a:active,
.Timeline .feature .box-footer a:active,
a.icon-listen-bl:focus,
.event-related .box-title a:focus,
.category-related .box-title a:focus,
.readmore a:focus,
.footer a:focus,
.pagination a:focus,
.news a:focus,
.latest-tweet .date a:focus,
.feature .box-header .title a:focus,
.caption .title a:focus,
.full-agenda-link a:focus,
.article a:focus,
.medialib-nav a:focus,
.timeline-months a:focus,
.Timeline .feature .box-footer a:focus {
text-decoration: underline;
}

Aucun humain sain d’esprit n’aurait écrit manuellement ce code, bouffi et rempli de sélecteurs peu efficaces.

Un pré-processeur est un outil. Au même titre que votre système d’exploitation, votre IDE, vos bibliothèques CSS ou JavaScript préférées, ce sont des outils.

Si vous utilisez une visseuse électrique et que vous abîmez tous vos pas de vis, il y a des chances pour que soit vous utilisez une mauvaise visseuse, soit vous ne savez pas vous en servir. Un pré-processeur n’est pas un mauvais outil.

Mais comme on dit dans l’informatique : PEBKAC.