CSS sucks, do Less!

L’écriture d’une feuille de style est l’un des moments les plus douloureux pour tout développeur Web : la science occulte des CSS et sa verbosité en font une soupe rarement agréable à avaler. Mais un outil peut changer tout ça : Less!

Less est un preprocesseur CSS et n’est pas magique : vous devrez tout de même travailler pour avoir un style graphique convenable. Mais la où il innove, c’est par l’ajout de quelques fonctionnalités bien pratiques, et on se demande comment nous avons pu nous en passer jusque la.

Do Less

Pour démarrer, un fichier css peut être un fichier less : vous le renommez en .less et le tour est joué. Ensuite, pour utiliser ce fichier, plusieurs choix s’offrent à vous. Vous pouvez inclure less.js dans votre page web et le laisser transformer vos fichiers less en css.

<script src="less.js" type="text/javascript"></script>
<link rel="stylesheet/less" type="text/css" href="styles.less">

Ou vous pouvez compiler directement vos fichiers less en css, selon le type de votre application :
– Avec des compilateurs existants comme less.app
– Avec le module less de nodejs
– Si vous faites du Play!, vous pouvez utiliser le module prévu. A noter qu’en Play!2, le support de less est natif, la compilation se fait de façon transparente pour vous. Bref, Less commence à être connu et intégré un peu partout. Le magnifique Twitter Bootstrap par exemple, un super bootstrap css qui vous permet de faire un style sympa même sans rien comprendre à l’art obscur des css, est fait avec Less. Mais bon, Less, ça fait quoi ?

Variables

Que tout ceux qui n’ont jamais pesté pour changer la couleur d’un thème lève la main! Bon, je ne peux pas voir, mais je suis sûr que vous n’êtes pas nombreux. Tout ça à cause de l’absence de variable en CSS. Voyons un peux comment Less remédie à ce problème, et à bien d’autres… Les variables sont nos amies : c’est la première chose que l’on apprend en programmation. On se retrouve un peu démuni en CSS, avec l’obligation de copier/coller n fois la même couleur ou la taille de police, et la galère qui suit pour un changement. Avec Less, c’est fini!Si vous voulez créer un thème, après avoir repéré le code couleur qui vous faisait rêver sur ColourLovers, vous pouvez définir vos premières variables :

@body_color: #262626;
@font_color: #EAF2D9;

On peut également définir d’autres variables, telles que la taille de la police :

@font_size: 20px;

Là où ça devient intéressant, c’est que l’on peut également faire des opérations (pas n’importe quoi hein, juste des opérations mathématiques de base) :

@big_font_size: font_size + 2px;

Fonctions

Si l’on a des variables et des opérations, vous vous doutez que l’on a aussi … des fonctions ! Baptisées “mixins” elles permettent de créer des styles avec des paramètres. Exemple :  les petits bords arrondis sympas que l’on veut mettre sur tous les boutons mais qui sont définis avec des styles spécifiques à chaque navigateur, et que l’on doit répéter à chaque taille d’arrondis que l’on veut.
Less nous permet de créer une fonction border-radius avec un seul paramètre nommé radius

.border-radius(@radius){
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}

Cette fonction peut ensuite être appelée dans votre style :

.border-radius(10px);

Et ca devient franchement cool, quand on voit que d’autres ont pris le temps de faire des fonctions à notre place, et que l’on peut utiliser ces fichiers dans nos styles, lesselements ou encore dans le Bootstrap Twitter (oui, je suis fan).

Vous n’aurez plus jamais besoin d’écrire un préfixe navigateur (voir l’excellent screencast de nettuts), et ça, ça n’a pas de prix!

Less inclue lui aussi nativement un certain nombre de fonctions portant sur le traitement des couleurs (saturate, lighten, etc http://lesscss.org/#-color-functions). Par exemple :

fade(@color, 50%);

renvoie une couleur 50% plus transparente. Cool, huh ?

Nesting

Maintenant que nous avons vu les briques de base, on peut se pencher un peu plus sur l’apparence d’un fichier .less. On a l’habitude en css de répéter pour chaque régle toute les classes concernées, ce qui devient vite très verbeux :

.share {
 ...
}
.share .name {
 ...
}
.share .tag {
 ...
}
.share .tag .price {
 ...
}

En less, on peut faire quelque chose de plus simple et plus logique :

.share {
  ...
  .name {
    ...
  }
  .tag {
    ...
    .price {
      ...
    }
  }
}

Ce nesting peut s’appliquer aussi bien aux classes, aux ids et aux éléments.
Le nesting a de plus l’avantage d’inciter a regrouper les règles, ce qui peut vite tourner à l’anarchie dans un fichier css classique (qui n’a jamais ajouté sa règle tout en bas du fichier pour aller vite …).

Import

Toujours dans l’idée d’avoir un style plus clair, il est possible de découper ses fichiers less en fichier plus petits et de faire des inclusions là où ils sont nécessaires. Ainsi, vous pouvez avoir un fichier de variables, avec les propriétés générales de l’application, couleurs, font etc… et un fichier de fonctions utilitaires que vous incluez ensuite dans vos fichiers de style.

@import "variables.less";
@import "utils.less";

Magique non ? Moi je ne peux plus m’en passer !

Il existe bien sûr des alternatives à Less telles que Sass issu du monde Ruby (excellent screencast pour le découvrir) ou Stylus, Cet article met d’ailleurs en avant les différences entre Sass et Less.

Le prochain article reprendra la mini appli nodejs des articles précédents et ajoutera un peu de style en less ! Stay tuned !

À propos de Cédric Exbrayat

Cédric Exbrayat, développeur et fondateur Ninja Squad, se réunit avec ses semblables régulièrement que ce soit au Lyon JUG ou à Mix-it, dont il est le fondateur. Java et JS for food and fun.

Publié le 31/01/2012, dans Getting started, Tools, et tagué , , . Bookmarquez ce permalien. 18 Commentaires.

  1. Article intéressant, même si je connaissais déjà. Mais il est toujours bon d’en faire de la publicité !

    Petite question : quid du support par les IDE (Eclipse / NetBeans / IntelliJ pour nous autres, développeurs Java) ? Existe-t-il des plugins pour permettre l’édition (« intelligente ») des fichiers *.less ?

    (ps: attention, quelques liens dans l’article sont un peu cassés)

    • Pour Eclipse et Netbeans, je peux pas te dire. IntelliJ lui s’en sort plutôt bien nativement, avec complétion etc…

      • Petite question IntelliJ + Less c’est dans la version communautaire d’IntelliJ ou pas?
        (sur un projet nous sommes en cours de définition des besoin en outils et un argument de plus pour IntelliJ est toujours bon à prendre)

      • J’ai une licence, mais je pense que ca marche en communautaire également

  2. A en croire le comparatif des 2 versions (http://www.jetbrains.com/idea/features/editions_comparison_matrix.html?IC), l’éditeur CSS n’est pas disponible dans la version communautaire. Ca parait logique dans la mesure où cette dernière et surtout faite pour le développement web.

  3. Bon, la question m’intéressant, j’ai regardé du côté du support pour Eclipse : ce n’est pas encore ça. J’ai mis mes premières impressions sur mon blog :
    http://linsolas.free.fr/wordpress/index.php/2012/01/lesscss-et-eclipse/

  4. Absolument pas d’accord avec ta première phrase mais tout a fais d’accord avec la seconde🙂

  5. J’utilise webstorm, je préfère sass/scss mais pas d’implémentation native.
    Les fichiers sont reconnus, la coloration syntaxique est prévue mais on doit passer par un compilateur à côté.

  6. Très intéressant. J’en avais vaguement entendu parlé et grâce à cet article, je saisie bien ce qu’est Less.

    Par contre je trouve le titre un peu caricatural. Mon impression quand je te lis (on se tutoie?) est que Less ne répond pas que a des manques de CSS, mais plutôt à des mauvaises pratiques des développeurs.
    Par exemple: l’exemple qui justifie l’emploi de variables part, à mon avis, d’une mauvaise pratique de CSS: répeter l’information (ici la couleur). CSS fonctionne avec des classes et on applique ces classes aux éléments de la page. Les classes peuvent être assimilés à des « traits » (pour ceux qui font de la POO). Donc si le thème est relativement bien conçu, le changement d’une couleur ne devrait pas être pénible. Sur le site web de notre boite on a 3 couleurs corporate. Comme je retiens pas le code couleur j’ai mis 3 classes: .red .green .gray et je l’ai applique aux éléments. Tout reste cohérent.

    Autre exemple, le « Nesting »:
    « On a l’habitude en css de répéter pour chaque régle toute les classes concernées » => pourquoi faisons nous cela? C’est souvent injustifié. Moi je ne répète jamais les classes parentes sauf quand je veux « surcharger » un style. Effectivement CSS permet de mettre les règles n’importe où et dans n’importe quel ordre, ça c’est pénible surtout quand plusieurs développeurs bossent sur les mêmes feuilles de styles et que celles-ci sont très grandes (où qu’il y en a pléthore): on se retrouve soit à dupliquer une règle (elle existait déjà, mais dans un autre fichier), soit à « fragmenter » un ensemble de règles qui « vont » ensemble.

    « Le nesting a de plus l’avantage d’inciter a regrouper les règles »
    => Less permet-il d’éviter ces comportements? Est-ce qu’on aura pas toujours besoin d’un Firebug pour démêler tout ça? Faudrait que je vois ça par moi même car je ne vois rien de présenter ici qui permettent d’éviter l’anarchie.

    Par contre les fonctions, j’aime bien, parce que je suis développeur, mais sinon…

    Au final j’ai l’impression que les « développeurs », veulent absolument que CSS soit un langage de programmation. (Ne me dites pas qu’il y a des if…then…else dans Less). Moi je ne trouve pas CSS occulte. Verbeux, trop peu contraignant oui mais occulte non.
    Si on regarde l’aspect des sites il y a 15 et ceux d’aujourd’hui on mesure ce qu’a apporté CSS

    Donc je te propose le titre suivant: Stop doing shit styles with CSS, Do smarter with Less
    :-p

  7. Un moins vulgaire: « do Less dirty CSS styles »
    🙂

    • Merci pour tes remarques et arguments. Et j’aime bien tes suggestions de titre, mais le blogging est comme un média classique : il faut faire des titres provocateurs pour attirer le lecteur et faire passer des idées ;-P

      • Je concède🙂

        Le pattern « X sucks, Do y » est un peu trop utilisé à mon goût cela dit.

        Bonne continuation

  1. Pingback: LessCss et Eclipse « romain.getBlog( );

  2. Pingback: So what is Meteor? « Hype Driven Development

  3. Pingback: Le site Mix-it : making-of « Hype Driven Development

  4. Pingback: Un an de hype! « Hype Driven Development

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :