Logo site Des Geeks et des lettres

L'application pour surveiller / sauvegarder vos smartphonesL'oeil inquisiteur de Bibispy

Préprocesseurs CSS : oui, oui et oui

J’entends souvent dire que l’utilisation des préprocesseurs CSS, comme LESSSASS ou Stylus, dépend de la taille du projet sur lequel nous intervenons ou travaillons, et je ne comprends pas cet argument car cela ne prends pas plus de temps qu’auparavant, bien au contraire. Je voulais donc vous montrer dans ce billet l’intérêt que nous devons porter à ces nouveaux langages qui nous permettent enfin d’écrire de manière sexy nos feuilles de styles vieillissantes.

wordle-css

Les manques

Je ne sais pas vous, mais moi lorsque j’utilise un langage informatique, je m’attends à écrire du code propre de façon à qu’il soit potentiellement réutilisable et d’une manière agréable et claire, et bien c’est tout le contraire avec CSS, rien n’est fait pour que l’on prenne plaisir à écrire nos feuilles de styles, voici les principaux inconvénients :

  • Variables. Il est impossible de rationaliser le code CSS sans se répéter indéfiniment (couleurs, la taille du texte, etc.), sans variables la relecture et la compréhension du code sont très difficiles
  • Hiérarchie. Les langages HTML ou XML sont des langages de balisage qui permettent de structurer un document de façon hiérarchique (noeud racine + noeuds fils), le langage CSS n’est juste qu’une liste d’instructions à plat, sans aucun lien les uns aux autres
  • Préfixes. CSS3 offre de nouvelles propriétés intéressantes mais le fait de devoir à chaque fois penser à mettre tous les préfixes des différents navigateurs est pénible
  • Sprites. L’amélioration des performances est une bonne solution avec les sprites d’images CSS, cependant leur maintenance est compliquée et nécessite généralement de repasser derrière nos feuilles de styles
  • Abstration. Aucun héritage n’est possible entre nos différentes règles, nous devons à chaque fois tout répéter

La conversion

Vous l’aurez compris, les préprocesseurs CSS comblent tous ces problèmes et beaucoup plus, cependant vos nouvelles feuilles de styles au format .less, .scss, .sass ou .styl ne seront pas interprétées correctement par les navigateurs qui ne comprennent que les fichiers au formats .css, il faudra donc procéder à une conversion vers un format CSS valide, voici comment s’y prendre :

  • Pour convertir une syntaxe SASS (formats .sass/.scss), il faudra obligatoirement utiliser un compilateur côté serveur en Ruby ($ gem install sass, $ mv style.css style.scss, $sass --watch style.scss:style.css) ou en PHP avec PHPSass
  • Pour convertir une syntaxe LESS (format .less), nous avons le choix entre une compilation côté client comme LessCSS ou une compilation côté serveur en PHP avec LessPHP ou Node.js ($ npm install -g less, $ lessc styles.less styles.css)
  • Pour convertir une synthaxe Stylus (format .styl), il faudra obligatoirement utiliser un compilateur côté serveur en Node.js  ($ npm install stylus, $ stylus --compress < some.styl > some.css)

La compilation côté client (pour LESS uniquement) présente l’avantage de pouvoir convertir à la volée vos fichiers .less sans toucher à quoi que ce soit, c’est le navigateur qui s’occupera de tout, aidé par le fichier less.js.
L’avantage d’une compilation côté serveur (SASS ou Stylus) se situe au niveau de la compatibilité, vos internautes qui désactivent JavaScript n’auront aucun problème pour visualiser votre site.

Comparatifs

Il existe de nombreux débats entre LESS et SASS, j’avais d’ailleurs présenté il y a quelques temps déjà LESS.css dans ce billet, et chaque débat tend à dire que LESS est meilleur que SASS ou vice versa … je n’aime pas ce genre de conclusion tant ces deux langages se ressemblent car ils offrent les mêmes fonctionnalités (variables, functions, imports, mixins, extends, nested rules, selectors, conditionals, comments, etc.) , la différence majeure se fait dans l’écriture même du code (la syntaxe).

Stylus semble arriver un peu tard dans la bataille des préprocesseurs CSS et va avoir du mal à s’installer voire remplacer nos scripts .less ou .sass, cependant il présente certaines options intéressantes qui ne manqueront pas d’attirer l’attention de certains : syntaxe à la Jade (écriture minimaliste, tabulations importantes), l’option watch pour compiler à la volée, import amélioré d’un répertoire complet, etc.

sass-less-stylus

Voici deux comparatifs très intéressants entre nos trois langages, cela vous permettra de vous rendre compte qu’ils sont très proches, fonctionnellement identiques mais possédant chacun une syntaxe différente :

  1. LESS vs SASS
  2. LESS vs SASS vs Stylus

Le futur

Je suis persuadé que c’est l’arrivée  de tels projets qui a permis au W3C d’envisager d’intégrer les fonctionnalités offertes par ces préprocesseurs CSS dans une nouvelle spécification en cours d’écriture : http://dev.w3.org/csswg/css-variables. Ce qui veut dire que demain nous écrirons nativement nos CSS de cette manière et ça c’est top.

En attendant, ne passez plus à côté de ces nouveaux langages par ignorance, donnez leur la place qu’ils méritent dans votre prochain projet Web 🙂

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • PH de Kaliseo 13 mars 2013, 8 08

    J’ai beaucoup entendu parlé de SASS, mais je n’ai jamais eu la curiosité de tester. Mais comme tu dis, plus aucune excuse, pour le prochain projet je l’adopte !

    Réponds !

  • Mimie 13 mars 2013, 8 08

    Ah tu me fais plaisir là 🙂

    Réponds !

Article suivant:

Article précédent:

Recherche

A vos stylos !

  • Chris: “Bonjour, Quel est le nom de la table du plugin W3Total Cache car je ne la trouve…Déc 1, 09:22
  • Greg: “Liens de l'article mis à jour.Nov 27, 14:32
  • Greg: “Vraiment pénible ce problème. Pour ma part je l'ai résolu en créant un raccourci manuel dans mes favoris et en…Nov 20, 23:28
  • Jacqueline: “Je suis sur Safari.... même problème. Mon appli pour iPad ne fonctionne pas non plus.Nov 18, 08:44
  • Greg: “Ouais mais c'est vrai que ton article était bien senti. Ca le fait que tu le lises depuis Feedly :)…Nov 3, 21:00
  • Youness: “Bonjour, Merci pour cette article il ma aider enormement lors de la creation de mom projet Ma question…Nov 3, 20:29
Share This