Alors que le travail d’intégration devient de plus en plus complexe et contraignant, les outils tels que les préprocesseurs CSS sont-ils une bonne solution? S’ils peuvent s’avérer utiles dans un contexte de production sont-ils pour autant incontournables?

Longtemps réticent à leur utilisation, j’ai décidé de prendre le temps pour relever le challenge et voir si ces « nouveaux » outils peuvent réellement faire évoluer le travail d’intégration et aussi quelles en sont les limites.

J’ai utilisé le language Sass sur 3 types de projets différents:

  • Un site dynamique responsive sous wordpress sans grille
  • Des thèmes Worpdress avec grille
  • Un prototype fonctionnel avec grille

Voilà mon retour d’expérience, mais tout d’abord une présentation des préprocesseurs CSS :

1/ Principe général des préprocesseurs CSS

Less, Sass, Stylus sont des métalanguages qui permettent de compiler du code CSS. C’est une différente approche de l’intégration qui se rapproche de la programmation orientée objet et qui permet de créer des règles CSS imbriquées et un ensemble de propriétés réutilisables. Le but étant de rendre les feuilles de style plus faciles à construire, à organiser et à maintenir.

Dans cet article nous parlerons uniquement de Sass qui est l’un des plus populaire, de nombreux comparatifs existent sur les différents préprocesseurs CSS.

Voici les principaux avantages à utiliser un langage comme Sass (Syntactically Awesome Stylesheets).

2/ Une intégration plus rapide et plus souple

La principale différence avec CSS est la possibilité de créer des objets et des variables dans les feuilles de style :

Il est possible d’utiliser des variables, des mixins et leur héritage.

Exemple avec les variables:

$color: #3bbfce;
$leftmargin: 16px;

.content-navigation {
color: $color;
margin-left:$leftmargin;}

Exemple avec les mixins:

@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}

#data {
@include table-base;
}

Sera compilé :

#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}

Il est également possible de prolonger les propriétés d’un sélecteur avec la fonctionalité @extend en récupérant ses propriétés.

Exemple

.box {
border: 1px #000;
background-color: #000;
}

.bigbox {
@extend .box ;
width:300px ;
}

Sera compilé

.box, .bigbox {
border: 1px #000;
background-color: #000; }

.bigbox {
width:300px ; }

On peut créer des fonctions complexes en calculant les propriétés grâce aux opérateurs

@function calc-line-height($font-size) {
@return ceil($font-size / $base-line-height) * ($base-line-height / $font-size);}

Sass apporte de la lisibilité au code, il permet de travailler en imbriquant les sélecteurs…

Exemple :

.box {
background:#000 ;
.div {
text-align: right;
}
}

Sera compilé :

.box {
background:#000 ;
}
.box .div{
text-align: right;
}

D’autre part le fait de pouvoir faire des imports de mixins fait gagner là aussi énormément de place et permet de mieux se retrouver dans le code. De plus, modifier les variables et les mixins importés permet également de gagner un temps important lors de la maintenance des projets. Par exemple il sera très rapide de modifier le schéma de couleur d’une charte graphique en utilisant les propriétés `rgba`, `darken`, `desaturate`

exemple :

$boxcolor : #3bbfce ;

.box {
background:darken($boxcolor, 9%);
}

3 / Un nouveau processus d’intégration

Mon environnement combine l’utilisation de Sass, Compass, Codekit et le système de grille CSS  Sementic.gs ainsi que WordPress.

Codekit

Codekit est une application desktop qui permet d’installer facilement Ruby, il gère les différents métalangages comme  Sass, Less, Stylus, etc, … et les librairies comme Compass, Bourbon, etc, … L’application s’occupe de compiler le code CSS, de rafraichir les navigateurs, minifier le code, etc, …

Compass

Compass est un ensemble d’outils très puissants qui permettent de créer et maintenir vos sites plus rapidement. Il intègre des mixins de base utiles pour toute propriété CSS3 avec préfixes, pour la typographie et les resets CSS. Par ailleurs, la création de Sprites maintenables et aussi un des très gros points forts de Compass.

Sementic grid system

Le système de grille Sementic gs fonctionne avec le langage Scss et cela induit deux avantages majeurs sur les autres frameworks CSS:

Le principal atout de ce framework est que par nature il respecte la séparation de la forme et du contenu. Contrairement aux systèmes de grille classiques comme 960.gs, Blueprint, etc, Il n’y a pas de classe à passer en « dur », pas besoin de modifier le HTML donc… De plus il est possible de créer des design fluides, responsifs.

Par conséquent, la maintenance du site devient potentiellement rapide comme l’éclair et les fichiers de travail d’autant plus lisibles.

WordPress

Intégré à une installation WordPress, ce nouveau workflow à de réels atouts et simplifie la vie à condition d’être bien organisé.

Conclusion

Concrètement les préprocesseurs CSS m’ont aidé pour réaliser des sites simples mais également un projet plus complexe. Par ailleurs le prototype fonctionnel à été réalisé très rapidement et grâce aux mixins il à été possible de lui donner un aspect abouti.

Il n’y a pas de limite, on peut concevoir des mixins très complexes pour répondre à de nombreux besoins et  même si on utilise Sass qu’a 10% de son potentiel cela reste un gain de temps non négligeable et peut être un réel confort de travail.

En définitive je pense qu’avec une bonne organisation et si le design le permet, on peut obtenir de très bonnes pratiques d’intégration avec les outils comme Sass… On peut gagner du temps et de l’énergie.

Malgré tous les avantages des préprocesseurs CSS, il y a plusieurs inconvénients à leur utilisation :

Il faut dire que la maîtrise de l’environnement et de l’utilisation des préprocesseurs CSS demandera un temps d’adaptation et une grande rigueur aux intégrateurs. D’autre part la duplication de code, la taille de la feuille de style compilée ne permettent pas d’avoir un code optimisé à 100%.

L’autre problématique est que dans un contexte de production, le processus d’intégration XHTML/ CSS doit permettre un travail collaboratif; or, le code généré n’étant pas maintenable par différents intervenants il faut donc impérativement mettre en place un système de versioning comme Git.

D’autre part les préprocesseurs CSS ne conviendront pas à tous les projets et pourront même devenir contre-productives pour un developpement frontend trop complexe et trop spécifique.

_____________________________________________________

Sass:  https://sass-lang.com

Compass: https://compass-style.org

Sementic grid system: https://semantic.gs