Un pré-processeur est un outil

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

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.

  1. IAmNotCyril, le

    (Cyrilou :3)

    Ton article pose bien les choses sur ce non-débat.

    L’autre chose à dire de cohérent sur le sujet c’est (et je citerai Booba quand il était Lunatic) « Si tu kiff pas renoi t’utilises pas et puis c’est tout », comme toute les libs / framework / outils qu’on trouve sur Internet.

    Voilo.

  2. IAmNotCyril, le

    (ET BTW MON ARTICLE N’EST PAS ANTI PRÉPROCESSEURS EN TANT QUE TELS PUTAIN DE-)

  3. JeuneV, le

    Cher Cyrilou,
    Il me semble que Booba à repris la phrase à un des mecs d’arsenik. Voilou voilou.

    Je partage sinon l’avis du redacteur. Le mauvais code est fait par de mauvais développeur.

  4. Vincent De Oliveira, le

    Merci Rémi pour ce résumé.

    Moi non plus, je ne pense avoir écrit un article anti-préprocesseur, mais bon certains l’interprète comme ça.

    Bref.

  5. Nico, le

    Je me permets de le repréciser : ces articles (dont le mien) ne sont pas opposés aux préprocesseurs en soi. Mais surtout aux nombreuses mauvaises utilisations qui en sont faites.

    A bon entendeur ! :)

  6. MoOx, le

    Faudrait qu’on copie ça à l’école en fait… http://goo.gl/YVvzR

  7. Alexandre B, le

    J’ai l’impression qu’il y a énormément de mauvaise fois et mauvaise volonté saupoudré d’un manque de rigueur dans ce débat.

    Les risques de faire de la merde en LESS/Scss/stylus et j’en passe sont plus grand évidement, mais à contrario, si tu es déjà rigoureux dans ton travail, avec ce genre d’outils tu le sera encore plus, si on fini par arriver à des extrêmes tel le code que tu as cité, c’est qu’il y a un problème bien avant ça.

    « Sass doesn’t create bad code. Bad coders do. »

  8. newick, le

    oui mais c’est DRY ;)

  9. Draeli, le

    @Vincent De Oliveira : à la lecture pourtant c’est le sentiment que j’en ai et je t’ai d’ailleurs répondu dans les commentaires.

    Effectivement aucun intégrateur sain d’esprit !

  10. Ced, le

    Quoi il y a des intégrateurs qui font de la märde ? :o