LESS : moins de CSS pour davantage d’efficacité

LESS est un langage de présentation qui étend CSS pour lui apporter ce qu’il manque : productivité, facilité de maintenance et un héritage de propriétés. Il ressuscite quelque peu le fameux CSS Server Side.

À vrai dire, il apporte tout ce qu’il manquait à la réalité du terrain. De la souplesse et une possibilité supplémentaire d’industrialiser les développements d’interface.

La raison même de l’existence de LESS réside dans les lacunes de CSS, intrinsèques au langage et de son utilisation au quotidien.
_ CSS c’est bien mais combien de fois réécrit-on le même code ? Combien de fois on galère car les changements de taille impactent sur d’autres éléments ? Combien de fois on galère lorsqu’il faut répercuter un changement de couleur ?

Toutes ces choses devraient être simples.

La philosophie

Plutôt que de réinventer un nouveau langage, LESS s’est construit sur CSS en réutilisant sa syntaxe. Une fois le code LESS produit, il doit être machiné par un compilateur (existant en Ruby et PHP à l’heure où sont écrites ces lignes) afin d’être transformé en CSS compréhensibles par un navigateur Web.

Ce mode de fonctionnement permet d’automatiser le processus de construction et d’intégration continue puisque toute compilation erronée produira une exception.

Les fonctionnalités

En partant de ce principe, LESS a donc ajouté toute une palette de fonctionnalités, toutes très utiles, et pour cause.

Les variables prédéfinissent des valeurs que l’on peut réutiliser dans les propriétés CSS de nos déclarations. Cela rappellera à certain la proposition de module CSS constante.
_ Elles peuvent se combiner aux opérations pour calculer dynamiquement des tailles. Cela se révèle on ne peut plus pratique lorsque certaines valeurs sont des combinaisons, soustractions et/ou multiplications d’autres propriétés. Une mise à jour de variable mettra donc automatiquement à jour ces valeurs lors de la compilation.

Les mixins apportent une couche d’héritage, autre que la cascade habituelle. On peut clairement spécifier que l’on souhaite hériter des propriétés d’une autre déclaration. Très pratique pour éviter la répétition de code et facilement répercuter des changements à ce niveau.

Les règles imbriquées feront plaisir à ceux qui pratiquent l’indentation au sein de leurs feuilles de style. Le principe est le même et plus parlant même : toute déclaration au sein d’une autre se fera selon un principe de cloisonnement, tel un namespace.
_ Cette pratique facilite l’encapsulation du code et probablement son organisation, forcément plus structurée.

Remarque : le portage PHP de LESS, lessphp apporte des fonctionnalités supplémentaires, comme les accesseurs ou les fonctions. Des atouts dans notre quête de flexibilité.

Preuve par l’exemple

Voici un exemple de code LESS, mélangeant les différentes fonctionnalités énumérées précédemment.

@the-border : 1px ;
@base-color : #111 ;

.rounded-corners-moz-border-radius : 8px ;
-webkit-border-radius : 8px ;
border-radius : 8px ;

#header color : @base-color * 3 ;
border-left : @the-border ;
border-right : @the-border * 2 ;
.rounded-corners ;

a:link,
a:visited{
border-bottom : @the-border solid @base-color ;

}

#footer color : @base-color + #111 ;
.rounded-corners

Son équivalent en CSS correspond au code suivant :

#header color : #333 ;
border-left : 1px ;
border-right : 2px ;
-moz-border-radius : 8px ;
-webkit-border-radius : 8px ;
border-radius : 8px ;

#header a:link,
#header a:visitedborder-bottom : 1px solid #111 ;

#footer color : #222 ;
-moz-border-radius : 8px ;
-webkit-border-radius : 8px ;
border-radius : 8px ;

Conclusion

LESS est à mon avis l’outil qu’il manquait pour consolider les développements CSS, éviter les effets de bord et faciliter leur maintenance. Cela se paie au prix d’une nouvelle portion dans la courbe d’apprentissage, d’une obligation à bien structurer son architecture visuelle (qui s’en plaindra ?) et, point qui chagrinera le plus grand nombre, à une double lecture :
-# celle de la feuille de style CSS pour trouver l’origine du problème
-# puis celle de la feuille LESS pour répercuter le changement

LESS est une bonne occasion de mener une réflexion supplémentaire sur l’organisation de ces feuilles de style : soupe de code ou briques bien rangées ? C’est vers cette deuxième direction que l’outil nous mènera.

Des outils comme Symfony ou WordPress disposent déjà de modules automatisant la compilation des feuilles LESS.
_ À quand l’arrivée dans nos éditeurs de code favoris pour une compilation à la volée avec pourquoi pas, une intégration réversible : toute modification dans une feuille CSS peut se répercuter dans nos feuilles LESS.