Préprocesseurs CSS: Stylus plus pratique que LESS

Bonjour à tous !

Je viens de m'inscrire sur le forum mais cela fait déjà quelques années que j'apprécie la qualité des articles sur alsacréations. Merci à tous les contributeurs ! Je tiens maintenant à mon tour à vous faire partager ma modeste expérience en développement web.

Dernièrement, j'ai été très intéressé par les deux articles suivants :
- CSS maintenables
- Des CSS dynamiques grâce au langage LESS

J'ai testé LESS qui m'a immédiatement convaincu de l'intérêt d'un préprocesseur CSS. Puis j'ai fait quelques recherches, car quitte à simplifier le code CSS, autant que l'ajout des préfixes propriétaires soit fait lui aussi automatiquement !

Les articles sur ce sujet fourmillent sur le web (surtout si vous êtes anglophone). J'ai retenu que les principaux préprocesseurs CSS sont :
- SASS avec Compass,
- LESS (plusieurs compléments disponibles),
- Stylus avec Nib.

Pour une comparaison rapide des trois outils, je vous invite à consulter cette présentation. Elle est en anglais, mais pour les non-anglophones si vous faites défiler suffisamment de diapo vous verrez des exemples de syntaxe.

Vos fichiers source peuvent être compilés par le serveur (cf. article d'Alsacreations), mais un point important est que les trois outils peuvent aussi fonctionner indépendamment du serveur : ainsi ils permettent de générer automatiquement les fichiers CSS lorsque les fichiers source sont modifiés. Donc leur utilisation devient très simple : éditez les fichiers dans l'éditeur texte de votre choix, sauvegardez et actualisez la page web pour voir le résultat ! Et au passage, les fichiers peuvent être compressés. Que demander de plus ?

Concernant les préfixes propriétaires, les trois outils proposent leurs propres solutions. C'est pour moi un énorme soulagement que ne pas avoir à le faire manuellement, ni à utiliser des solutions en Javascript lorsque les préfixes suffisent (ce qui n'est pas toujours le cas, c'est vrai).

Bien, quel est le vainqueur ?

Mon message est bien trop succinct pour apporter une réponse solide… Je pense néanmoins que Stylus propose la syntaxe la plus concise et intuitive : pourquoi s'embarasser de

{ … }

et de

;

lorsqu'une simple indentation suffit ?! Toutefois, je ne sais pas quel est l'impact réel en environnement de production, car Stylus est relativement jeune. Pour ma part, je développe un prototype d'application locale en Python interfacée avec un navigateur (avec Cherrypy et Jinja) et Stylus me convient bien.

Pour conclure, je pense qu'il serait intéressant d'approfondir le sujet :
- faire un sondage sur l'utilisation des préprocesseurs CSS : utilisation ou non, lequel, avantages/inconvénients, etc.
- écrire un article plus général sur l'utilisation de ces outils, tutoriels (pour compléter les docs francophones).

Qu'en pensez-vous ?
Modifié par Der Vogel (13 Mar 2013 - 09:47)

Pour une introduction à Stylus en français, consultez également cet article, qui semble s'inspirer de mon message.

J'utilise maintenant quotidiennement cet outil, que je considère fiable et qui me simplifie grandement la vie.

Ce sujet a déjà été consulté un grand nombre de fois sur ce forum, mais il n'y a pas eu de réponse. Quelqu'un a-t-il testé et voudrait faire part de son expérience sur ce forum ?
Modifié par Der Vogel (09 Mar 2013 - 19:41)

Je ne pense pas qu'on puisse parler de vainqueur entre Less, Sass et Stylus. Chacun a ses particularités et question fonctionnalités, ils sont à peu près équivalents. Après c'est une question de préférences.

Personnellement, je trouve qu'un langage dont l'indentation change le sens logique est une aberration. Des espaces et des tabulations pour remplacer les accolades et les points virgules, c'est le meilleur moyen de casser discrètement une feuille de style après une réindentation hasardeuse par l'éditeur du collègue. C'est pour ça que je fuis Stylus et CoffeeScript comme la peste. Mais ce n'est que mon opinion.

Effectivement c'est une question de préférences. J'ai trouvé que Stylus n'était pas souvent cité dans les articles, alors j'ai créé un sujet sur le forum.

En ce qui concerne l'utilisation de l'indentation, je trouve au contraire que c'est un très bon choix car cela rend le code plus lisible et moins verbeux. Python et le format ReStructuredText sont également de très bons exemples dans le genre.

Après tout, une feuille de style n'est ni plus ni moins qu'une liste (de filtres) d'éléments dont on définit des listes de propriétés. Les listes dans les textes sont conventionnellement indentées (avec ou sans puce) pour les rendre lisibles, en passant à la ligne à chaque élément. C'est un principe visuel et intuitif.

Le risque d'une "casser discrètement une feuille de style après une réindentation hasardeuse par l'éditeur du collègue" que tu signales ne devrait pas avoir lieu d'exister : choisir de bons éditeurs et définir un référentiel de style de programmation pour toute l'équipe sont des éléments nécessaires à la bonne conduite de tout projet. Quel éditeur utilises-tu pour rencontrer ce genre de problème ? As-tu un référentiel de programmation ?

Au final, chacun doit choisir l'outil qui lui convient le mieux, mais il est important de savoir que l'on a le choix !
Modifié par Der Vogel (23 Jan 2014 - 14:59)

Au passage, pour un usage plus simple de Stylus, lire l'article sur Prepos sur ce site.