En préambule je voudrais dire que le but de l’article n’est pas de se poser la question de savoir si les pré-processeurs c’est mal ou pas – il est bien connu que les gens n’aiment pas le changement : il faut en effet 21 jours aux neurotransmetteurs du cerveau humain pour créer une nouvelle connexion entre neurones qui facilitera le changement et ensuite 90 jours pour consolider les nouvelles habitudes. On comprendra donc aisément que de nombreuses personnes souhaitent s’en tenir aux bonnes vieilles CSS qu’ils maîtrisent parfaitement. J’ai d’ailleurs lu pas mal d’articles et de commentaires assez drôles sur le sujet.

Les préprocesseurs CSS ne remplacent pas le langage CSS en lui même et le fait d’apprendre un nouveau langage qui vient se sur-ajouter n’empêche en rien de continuer l’apprentissage de CSS (il n’est d’ailleurs pas possible d’apprendre Stylus sans connaître CSS). Il est de la responsabilité de chacun de maintenir ses connaissances en la matière, la dérive étant parfaitement illustrée par l’usage de jQuery qui dans l’esprit de nombreuses personnes a remplacé le couple JavaScript/DOM à tel point que l’apprentissage de JavaScript fait actuellement un retour en force, il est effectivement primordial d’avoir des connaissances en JavaScript et comprendre le DOM pour comprendre ce que fait jQuery et pouvoir adapter son code en fonction des buts et performances à atteindre, mais ceci fera sans doute l’objet d’un autre article sur le sujet.

J’aurais pu m’en tenir à un article sur les préprocesseurs css en général, mais de nombreux blogs l’ont déjà très bien fait dans le détail (cf la partie ressources de cet article) ou faire un énième article sur Sass qui est déjà super documenté et à qui Kaelig Deloumeau-Prigent a consacré un ouvrage entier : CSS maintenables Avec Sass et Compass (que je n’ai malheureusement pas encore eu le temps de lire), ou encore Less qui a certainement été le premier à être utilisé. Je me suis attaché à regarder du côté de Stylus qui est plébiscité par de nombreuses personnes de mon entourage et qui pourtant n’a pas le même retentissement que les deux premiers, pourquoi ?

Première question : qu’est-ce qu’un préprocesseur ?

Un préprocesseur est un programme qui procède à des transformations sur un code source, avant l’étape de traduction proprement dite (compilation ou interprétation).
source Wikipedia.

Dans le cas d’un préprocesseur CSS la syntaxe simplifiée ou enrichie en entrée est analysée et compilée en un langage que nous connaissons tous et que nous utilisons au quotidien : CSS.

Par exemple ces lignes de code écrites avec un préprocesseur CSS sont analysées et transformées en langage compréhensible par le navigateur.

Input :

body
  font 12px Helvetica, Arial, sans-serif

Output :

body {
  font: 12px Helvetica, Arial, sans-serif;
}

Avant de continuer : qu’est-ce qu’est CSS et qu’est-ce que n’est pas CSS et que viennent compenser les préprocesseurs ?

CSS n’est en aucun cas un langage de programmation, le fait de ne pas pouvoir définir des variables ou des conditions limite ses possibilités d’utilisation. Il est quasiment impossible de rationaliser le code CSS sans faire de nombreuses répétitions. Les préprocesseurs viennent combler ces manques à tel point que certains n’hésitent pas à y voir l’avenir de CSS.

Comment fonctionne Stylus ?

Qui peut le moins peut le plus. La syntaxe de Stylus est simplifiée à l’extrème, elle reprend celle de Jade, le moteur de template pour Node.js : oublions les deux points, points-virgules et parenthèses, ces signes de ponctuations auront leur utilité dans Stylus comme nous le verrons par la suite mais pas celle à laquelle les destine CSS initialement.

Il est ainsi possible avec Stylus d’écrire la propriété CSS suivante :

De cette façon,

body {
  font: 12px Helvetica, Arial, sans-serif;
}

ou de cette façon,

body
  font: 12px Helvetica, Arial, sans-serif;

ou encore de celle-là.

body
  font 12px Helvetica, Arial, sans-serif

Ce qui veut dire que Stylus accepte également l’écriture de CSS en version native.

Point important : l’indentation par tabulation rappelle la syntaxe de Python, et c’est là tout la rigueur de ce langage, selon que vous indenterez d’une façon ou d’une autre l’interprétation en sera complètement différente. Une habitude qui se prend très vite étant données les possibilités offertes.

Pour paraphraser Yves Bonnefoy, je dirais : pour comprendre Stylus installons Stylus.

Etape 1 : installer Nodejs
Etape 2 : installer Stylus en ligne de commande

npm install -g stylus

C’est fait ? Parfait, nous allons pouvoir passer à la pratique.

Vous créez votre répertoire comme d’habitude : fichier HTML, répertoire pour les images, etc. mais à la place de votre fichier.css, vous créez un fichier .styl, c’est ce fichier qui sera analysé par Stylus pour sa transformation au format CSS.

Il suffit juste de lancer Node et Stylus avec l’option « watch » sur le répertoire contenant votre fichier ou sur le fichier en lui même. Le fichier sera compilé à la volée.

stylus -w monrépertoire/monfichier.styl

Très pratique, vous travaillez sur le fichier .styl et vous liez à votre fichier HTML le fichier .css, ainsi vous pouvez voir directement sur votre page les modifications que vous apportez à votre fichier stylus, simple, non ?

Plus d’infos sur ce point particulier ? C’est indiqué là :

1. Les sélecteurs

Nous avons vu dans les quelques exemples donnés plus haut qu’il était optionnel d’indiquer les accolades, les parenthèses, les deux points voire les points virgules à condition d’indenter le code correctement. Il est également possible de ne pas indiquer les virgules à condition de passer à la ligne. Une fois ces quelques règles intégrées, il est très simple de commencer à coder comme vous le feriez naturellement avec CSS.

Pour se référer au sélecteur parent dans le même bloc de CSS, il suffit d’ajouter & devant la propriété définie.

body
  section div a
    color red
  &
    color blue

Un exemple plus parlant ?

body
  section div a
    color red
    &:hover
       color blue

aura pour résultat en sortie

body section div a {
  color: #f00;
}
body section div a:hover {
  color: #00f;
}

2. Les variables

Voilà certainement ce qui manquait le plus aux CSS pour assurer une maintenance facile des feuilles de style. Avec stylus les variables peuvent être préfixées par un $ ou pas. Les noms des propriétés peuvent être utilisées, on peut donc définir les valeurs pour la propriété font en utilisant une variable font, mais par soucis de clarté, il est conseillé de nommer les variables de manières à les identifier rapidement et sans ambiguité.

par exemple

fontarial14=14px Arial, sans-serif;

ou de cette manière

$fontarial14=14px Arial, sans-serif;

Ensuite cette variable sera utilisée partout où on voudra définir la propriété définie.

body
  font fontarial14

A noter que si vous utilisez le signe $ en préfixe du nom de votre variable, il faudra appeler la variable telle qu’elle a été définie (avec le $ donc).

body
  font $fontarial14

Mais le plus intéressant est de pouvoir utiliser la valeur d’une propriété définie dans un bloc CSS pour l’assigner à une autre propriété en ajoutant simplement le préfixe @ devant :

#logo
   position: absolute
   top: 50%
   left: 50%
   width: 150px
   height: 80px
   margin-left: -(@width / 2)
   margin-top: -(@height / 2)

Dans le cas où la propriété est définie plusieurs fois dans un même bloc, la dernière valeur (en remontant à l’intérieur du bloc CSS) sera prise en compte, dans l’exemple ci-dessous @color aura la valeur #00f (blue).

body
  color: red
  p
     color: blue
     a
	background-color: @color

Voilà, vous en savez assez pour pouvoir commencer et intégrer Stylus dans vos outils de travail, je vous encourage à prendre connaissance de la doc officielle de Stylus qui est claire et très bien documentée. Vous me pardonnerez, j’espère, les nombreux emprunts que j’ai pu y faire mais il me paraissait important de poser les bases avant de pouvoir aborder d’autres points plus précis à l’avenir. Les prochains articles consacrés à Stylus seront consacrés à des cas pratiques ou à des aspects plus obscurs du préprocesseur.

Ressources :

• Le manifeste du CSS pur et dur
• Clarence le poney
• Sass And LESS: An Introduction To CSS Preprocessors
• 8 CSS preprocessors to speed up development time
• Deep Dive Into CSS Preprocessors
• Csspreprocessor – Language Design
• How to Write a CSS Preprocessor Using Node.js?
• Sass vs. LESS vs. Stylus: Preprocessor Shootout
• Using CSS preprocessors effectively
• Sass vs. Stylus: Who Wins the Minimal Syntax Battle?
• Préprocesseurs CSS
• CSS Pre-Processors: Stylus, Less & Sass