Outils et bonnes pratiques pour l'intégrateur web
Intégrateur web chevronné, Kaelig Deloumeau-Prigent a longtemps travaillé pour la prestigieuse agence LunaWeb. Militant pour la qualité, la performance et la maintenabilité des feuilles de styles CSS sur son blog "Le ministère de l'intégration", il nous offre aujourd'hui un recueil précieux de conseils, outils et bonnes pratiques en matière de design web avec CSS : CSS maintenables avec Sass & Compass - Outils et bonnes pratiques pour l'intégrateur web.
Il nous explique pourquoi il est si important, selon lui, de les adopter pour réussir ses développements web...
Les questions
Comme vous le dites si bien dans votre avant-propos, dans le monde du développement web, HTML et CSS sont souvent méprisés au regard des langages "de haut niveau" comme PHP, Python ou JavaScript, en raison de leur prétendue facilité d'apprentissage. Il semblerait plutôt que la réalité soit légèrement différente...
Kaelig Deloumeau-Prigent : Les bases des langages HTML et CSS ont l'avantage d'être très simples à apprendre. C'est aussi ce qui fait du Web un endroit démocratique : il est facile de construire un site avec ces technologies pour exposer ses idées, ses produits et son talent au monde entier !
Malheureusement, contrairement à des langages comme Ruby ou Python, CSS n'enseigne pas de vision particulière sur la manière d'écrire le code et de résoudre des problèmes du quotidien. Ainsi, chacun est libre de rédiger ses feuilles de styles comme il l'entend. La liberté totale dans le style et le manque d'orientation pratique sont un danger pour la maintenabilité, la cohésion et la logique du code.
À un niveau professionnel, concevoir des sites et applications à l'aide de HTML et CSS demande aujourd'hui une rigueur et des compétences dignes du développement dans des langages de haut niveau. La complexification des contraintes liées aux performances, à l'agilité du développement, à l'accessibilité et à la compatibilité entre les différentes plates-formes sont autant de challenges qui donnent au métier d'intégrateur ses lettres de noblesse.
Quelles sont les trois plus grosses erreurs que vous ayez commises quand vous étiez jeune développeur ?
K. D.-P. : 1. Penser que le code que j'ai produit était "parfait" et pourrait résister aux années. Je me suis ensuite rendu compte qu'il n'y avait pas de code parfait, car les technologies évoluent sans cesse. Au lieu de produire un code trop réfléchi du premier coup, j'essaie aujourd'hui de coder avec simplicité pour que le code soit facile à remanier selon les besoins du projet, et de livrer des solutions testables au plus vite (que l'on pourra raffiner plus tard si elles s'avèrent payantes).
2. Produire un code inaccessible aux novices en utilisant mes propres conventions plutôt que de m'inspirer des pratiques les plus communes. J'ai toujours ma propre opinion sur la manière dont je souhaite architecturer et rédiger du code, mais les conventions en place et l'accessibilité du code sont la priorité : un code compréhensible par les autres développeurs est préférable à code trop cérébral. Pour cela, on utilisera des noms de classes explicites, on suivra le style imposé et on documentera son code au besoin.
3. Autre piège : privilégier la pureté du HTML à celle des CSS. Cette pratique conduit à produire des CSS très redondantes et complexes à maintenir. Le plus dur (et intéressant) étant de trouver la balance idéale entre la redondance dans le HTML et la redondance dans les CSS.
Vous avez donné quelques formations. Que conseillez-vous en premier lieu à vos stagiaires ?
K. D.-P. : CSS3 et HTML5 sont des nouveautés très excitantes qui permettent de produire des choses vraiment sympathiques, mais ce n'est pas parce qu'on peut faire quelque chose qu'il faut le faire. Attention à ne pas tomber dans la sur-utilisation de ces possibilités, car cela risque d'affecter les performances et de mettre en péril la pérennité du code.
CSS, c'est aussi une norme, que vous semblez bien connaître. Vous lisez les normes dans le texte ?
K. D.-P. : La norme est surtout écrite pour les fabricants de navigateurs, et n'est pas forcément intéressante pour les développeurs. De plus, les navigateurs ne respectent pas cette norme à la lettre, que ce soit en raison d'ambiguïtés du texte ou tout simplement de bugs, ce qui la rend inutile dans de nombreux cas. On tendra à plutôt jeter un oeil aux implémentations existantes pour comprendre les solutions qu'ont trouvé d'autres développeurs dans des cas d'usages précis.
De très bons ouvrages sont aussi disponibles sur le sujet comme CSS avancées de Raphaël Goetter, bien moins rébarbatifs que la spécification CSS dans le texte.
Toutefois, je prends beaucoup de plaisir à parcourir les Editor's Drafts du W3C, qui reflètent l'avancement des modules CSS (et deviendront des recommandations après quelques mois ou années). Cela permet de se tenir au courant des fonctionnalités avant même qu'elles soient implémentées par les navigateurs !
Le titre du livre évoque Sass et Compass. Pouvez-vous nous expliquer brièvement de quoi il s'agit ? Et pourquoi vous avez choisi ces outils ?
K. D.-P. : Sass est un préprocesseur CSS. Un préprocesseur est un métalangage, c'est-à-dire un langage qui permet d'écrire dans un autre langage. Pour schématiser, vous quand vous écrivez du code en Sass (ou tout autre préprocesseur CSS), un programme va le compiler en CSS.
Ce genre d'outils est apparu car CSS manque cruellement de structures avancées tels que les sélecteurs imbriqués, les variables et les boucles itératives. Sans ces fonctionnalités, comment produire un code qui suit les principes DRY (Don't Repeat Yourself - ne vous répétez pas) ?
La puissance et l'élégance de Sass rendent les CSS bien plus fun et beaucoup plus simples à rédiger, ce qui contribue à produire des feuilles de styles plus faciles à maintenir. Quant à Compass, ce framework est souvent associé à Sass car il emporte avec lui tout un lot de mixins (cette notion est abordée dans le livre), par exemple pour coder en CSS3 beaucoup plus simplement. En somme, Sass et Compass simplifient grandement le travail du développeur. Si j'ai choisi ces outils, c'est par fainéantise : j'aime que la machine exécute les tâches répétitives à ma place !
Vous travaillez désormais à Londres, comme développeur d'interfaces adaptatives pour BBC News. Comment vivez-vous cette nouvelle expérience ? Vous ne regrettez pas la Bretagne ?
K. D.-P. : Très bien, merci !
Je n'ai pas eu de mal à convaincre l'équipe du site m.bbc.co.uk/news que Sass était un choix idéal pour produire nos CSS (après avoir retranché le préprocesseur LESS dans ses limites). De plus, les nouvelles fonctionnalités offertes par Sass 3.2 arrivent à point pour simplifier l'architecture d'un site adaptatif.
Je fais aussi un travail d'évangélisation auprès des autres équipes de développement à la BBC afin de les conduire vers l'utilisation de Sass et Compass. Il reste beaucoup de travail pour rendre le code maintenable dans une organisation qui compte plusieurs douzaines de développeurs web...
Je regrette bien sûr la bonne cuisine et le bon vin Français, qui ici sont hors de prix ! Le temps londonien est assez similaire au temps breton, on va dire que ça m'aide à supporter la distance ! ;-) Je passerai en France cet automne, notamment pour Paris Web que je ne voudrais manquer pour rien au monde !
Retrouvez l'auteur Kaelig Deloumeau-Prigent sur son blog "Le ministère de l'intégration" : blog.kaelig.fr
En savoir plus sur l'ouvrage CSS maintenables : www.css-maintenables.fr (site dédié au livre)