La science de l’intégration web : des css maintenables

Par un drôle de concours de circonstances, j’ai été amené la semaine dernière à faire une modification dans un gros plugin développé par une autre société pour un CMS bien connu. Bilan : 3 heures de recherche dans les entrailles de l’existant pour 20 minutes et 50 lignes de code effectif… et pourtant, le tout était finalement plutôt bien organisé ! Mais cela aurait pu être pire : je n’ai pas eu à toucher à une ligne de CSS, univers bien souvent cauchemardesque à faire évoluer.

J’en parle aujourd’hui puisque je viens de boucler la lecture de « CSS maintenables avec Sass et Compass » et que ce livre vient mettre de l’ordre dans ce qui est jusque là un chaos plus ou moins sous contrôle dans l’essentiel des projets. En effet, après Javascript, CSS aura probablement été pendant longtemps l’autre langage particulièrement maltraité du web, faute de pratiques de références sur le sujet. Des pratiques de référence, le bouquin en donnent justement quelques unes dont je résume ici les plus marquantes. Au menu : de la maintenabilité certes, mais aussi de la productivité.

Un concentré de bonnes pratiques !

Un concentré de bonnes pratiques !

L’organisation du code CSS

Trouver la propriété CSS qui nous intéresse pour la modifier sans tout casser est souvent une épreuve compliquée. Il est en effet très rare de voir un projet suivre une organisation claire d’un bout à l’autre du projet.

Le livre nous propose pour cela une séparation en différents fichiers efficace : un fichier de reset (ou de normalisation), un pour les polices, un pour la structure du layout, un pour les champs de formulaire, un pour les autres styles globaux, un pour chaque template ayant des styles spécifiques.

Le CSS orienté objet

L’idée du CSS orienté objet est de se donner une manière de penser similaire à ce que l’on peut voir côté langage serveur : faire des choses plus génériques en utilisant beaucoup de classes et moins de sélecteurs basés sur les identifiants. Il y a différentes manières d’aborder ce CSS orienté objet mais une des plus intéressantes est probablement l’approche BEM.

BEM signifie Block-Element-Modifier. Cela signifie que l’on va créer des classes pour cibler des blocs (par exemple une classe « .menu » pour cibler un bloc d’éléments HTML utilisé pour faire un menu), des classes pour les éléments des blocs (soit une classe .menu-item pour les balises <li> qui composent mon menu), et des classes pour gérer des comportements spécifiques (un .menu-selected pourrait permettre de définir les styles spécifiques à un élément sélectionné). Je vous encourage à creuser le sujet si je ne le fais pas ici un jour, la méthode étant très prometteuse.

Les conventions de code CSS

Ca peut paraître idiot à dire, mais il n’y a pour ainsi dire jamais de coding styles ou de conventions de nommage dans les CSS. Rien n’empêche pourtant de le faire : on a même à y gagner au niveau JS puisque cela nous facilitera la vie quand il faudra bidouiller les sélecteurs CSS de nos scripts.

Le livre donne des recommandations pragmatiques et argumentées sur les conventions de code CSS. L’essentiel est de les définir, de les écrire et de les contrôler (par exemple dans de l’intégration continue)… comme pour le reste du code !

La bonne utilisation de pré-processeur CSS

Le livre est clair à ce sujet : continuer à coder en 2015 sans pré-processeur CSS est stupide. Le processeur de référence est aujourd’hui Sass (même si less ou stylus sont tout à fait valables) et l’auteur nous montre en quelques exemples bien sentis l’étendue de sa puissance au quotidien, même sur de petits projets.

Les pré-processeurs vont considérablement clarifier vos css, en particulier grâce à tout ce qui évite les répétitions : mixins, imports, héritages et variables. Imaginez revenir à du code sans constante, sans fonctions réutilisables et sans inclusion fichier… est-il vraiment raisonnable de continuer à se passer de cela ?

L’indispensable Compass

Compass, c’est le meta-framework qui va rendre plus puissant encore votre framework css (bootstrap, foundation ou autre) et votre code sass en faisant pour vous tout un tas de choses pénibles : sprites css, compatibilité multi-navigateurs, la grille de votre layout, des fonctions utilitaires sass courantes, la compilation de vos fichiers sass en css.

Une fois le passage sur Compass lu, on se demande aussi pourquoi continuer à travailler sans lui.

Une méthodologie d’intégration complète

L’ouvrage se termine avec une méthodologie complète d’intégration : de la réception des maquettes par un designer jusqu’à la mise en ligne de l’ensemble. C’est l’occasion pour l’auteur de recaser toutes les choses évoquées dans le livre dans l’ordre en insistant sur ce qui est vraiment important. Concret et efficace comme j’aime.

Pour les gens qui voudraient une version ultra condensée du livre (mais il y aura de la perte au passage…), je vous conseille cette présentation faite par son auteur.

Publicités

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 )

Photo Google+

Vous commentez à l'aide de votre compte Google+. 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 )

Connexion à %s