title: ★ Des CSS de qualité
slug: des-css-de-qualite
date: 2007-05-22 02:44:59
type: post
vignette: images/logos/css_qualite.png
contextual_title1: ★ iPheeds.org, une version iPhone pour votre blog
contextual_url1: 20080723-ipheedsorg-une-version-iphone-pour-votre-blog
contextual_title2: ★ L'artiste qui sommeille en chaque geek
contextual_url2: 20080613-artiste-qui-sommeille-en-chaque-geek
contextual_title3: ★ Astuces et bonnes pratiques Django
contextual_url3: 20080211-astuces-et-bonnes-pratiques-django
Je dois écrire ce billet depuis tellement de temps que ça doit se compter en années. Je profite d'avoir lu l'excellent livre « CSS 2 Pratique du web design » de Raphaël Goetter pour faire coup double avec une critique et un peu de contenu dans la foulée.
Critique du livre
Difficile de trouver quelque chose à redire de cet ouvrage. Tout y est, ou plutôt : tout ce qui mérite d'y être y est. L'auteur ne tombe pas dans le piège qui consisterait à répertorier l'ensemble des hacks connus et c'est une excellente chose, on vit bien mieux sans. L'enchaînement des chapitres est cohérent, le style est clair et concis (on sent l'habitude d'écrire pour le web) et l'exemple que l'on suit tout au long de l'ouvrage est un véritable atout pour sa vitalité.
Ce qui m'a surtout plu dans ce livre, c'est l'approche à la fois didactique et militante sans pour autant porter un jugement sur les navigateurs obsolètes. L'auteur est convaincu et fait passer sa conviction à travers cet ouvrage et dans un tel domaine c'est important, c'est ainsi que les standards progressent doucement mais sûrement : par l'éducation. J'ai retrouvé dans ces pages le parfait reflet de la communauté AlsacreationS et de son dynamisme. Pour couronner le tout, il y a même un site consacrée au livre.
Il n'y a que les annexes qui m'ont un peu déçu car ce sont des ressources que l'on manipule bien mieux en ligne et je doute de leur utilité en format imprimé (il est rare de faire ou d'apprendre les CSS en étant déconnecté). Dommage qu'il n'y ait pas eu aussi plus de contenu relatif à Internet Explorer 7 car c'est ce que j'attendais de la seconde édition mais bon à force d'être sur #openweb je deviens peut-être un peu trop exigeant aussi :-).
Des CSS de qualité
L'idée d'un tel billet est partie du constat qu'il existait énormément de ressources listant les hacks les plus connus mais très peu faisant référence aux bonnes pratiques ou aux règles d'organisation pour « coder » en CSS. Je vais tenter ici de regrouper celles que j'utilise le plus souvent, vous pouvez les utiliser ou pas, ce sont juste mes indicateurs de qualité personnels.
Un modèle pour gagner du temps
Les designs se suivent et se ressemblent bien souvent (au niveau des CSS en tout cas).
- Remise à zéro : il existe tout un tas de reset.css, la dernière en date est probablement celle d'Eric Meyer que j'utilise maintenant. C'est un peu bourrin car il faut vraiment tout redéfinir mais la qualité a un prix :-) ;
- Hacks usuels : même s'il faut essayer de les éviter au maximum en raison des effets de bord et de la pérennité du travail réalisé, il y en a certains qui reviennent fréquemment et il est toujours bon de les avoir sous la main ;
- Layout général : les sites de layouts pullulent, LayoutGala est pas trop mal pour ça, tout dépend de vos besoins.
S'organiser pour s'y retrouver
Un fichier CSS peut devenir très long, marre de scroller à tout va ?
- Indentation, vers des CSS pythoniques : rassurez-vous j'utilisais cette technique avant de faire du python ! Je pense que le plus simple est de jeter un œil à la CSS de l'exemple concret ci-dessous, il s'agit d'indenter le code pour chaque niveau de la cascade (ou presque) ;
- Agencement et lisibilité : ici je n'ai pas vraiment de conseil à donner car ça dépend bien souvent de votre éditeur et donc probablement de l'alignement de Mars et Pluton. Certains recommandent de faire un menu ou de placer des raccourcis pour accéder rapidement aux différentes parties mais avec le précédent conseil vous n'en aurez normalement pas besoin puisque seuls les conteneurs seront sur la gauche et formeront donc des raccourcis sans ajout de commentaires superflus ;
- Fichiers séparés... ou pas : tout dépend de la taille du projet mais je suis de moins en moins persuadé du bien fondé d'avoir une CSS différente pour le layout, la typographie, etc. À la limite avoir une CSS différente pour une partie du site qui est peu visitée et qui demande beaucoup de styles mais sinon c'est plus une contrainte qu'autre chose et ça demande de constamment passer d'un fichier à un autre ce qui est pénible (sans compter les performances au téléchargement).
Pérennité et documentation
Si vous travaillez à plusieurs sur un gros projet, ces conseils sont vraiment importants.
- Styleguide et template : le duo gagnant : je n'arrive plus à trouver le lien original sur la définition d'un styleguide en CSS mais concrètement ça ressemble à ça, il s'agit de rassembler sur une même page tout les éléments utilisés et d'afficher leur style. C'est bien différent du template qui est généralement représentatif du layout du site et qui ne contient pas forcément tous les éléments stylés ;
- Documentation, pensez aux autres ! : vous venez de passer
une deux heures sur un bug IE récalcitrant et vous remarquez sa réapparition quelques jours plus tard... n'allez pas frapper votre collègues, documentez vos bugfix ou mieux : faites des tests ;
- Des tests pour les cas critiques : faites une page (comme pour le styleguide ou le template) pour chaque bug qui seront autant de tests unitaires à valider après chaque modification du code CSS, c'est rarement fait mais ça peut faire gagner un temps énorme (et des nuits blanches après des modifications en prod ;-)).
Optimisations finales
Prêt à mettre en ligne ? Il est temps d'optimiser.
- Utilisez les propriétés générales : utilisez font, padding, margin et non font-family, margin-left, padding-bottom par exemple, c'est assez bien documenté ailleurs ;
- Utilisez la cascade : c'est ce que l'on oublie bien souvent lorsque l'on a la tête dans le guidon mais il est souvent possible avec du recul d'optimiser la structure et donc sa mise en forme en les simplifiant, en enlevant les class ou les div inutiles. Vous pouvez aussi appliquer des propriétés générales à des éléments d'un niveau supérieur pour éviter les répétitions ;
- Compressez tout ça : le navigateur ne voit pas la différence mais l'utilisateur oui en téléchargeant plus rapidement la feuille de style alors pourquoi s'en priver ? Il existe de nombreux outils qui sont heureusement comparés sur cette page. J'utilise généralement CleanCSS car CSS Compressor m'enlève bien souvent trop de styles (n'oubliez pas de tester à nouveau vos pages après la compression !) et puis CleanCSS dit ce qu'il fait donc vous pouvez corriger les problèmes à la source ce qui est tout de même plus pratique.
Exemple concret
Celle de ce site commence à dater ce qui ne convenait pas en guise d'exemple. J'ai donc décidé à cette occasion de refaire mon CV que j'ai intitulé pompeusement « Profil (CV) de David Larlet, concepteur d'applications web », je voulais qu'il ait un contenu plus proche de ce que je fais, de ce que je suis, un peu moins formel aussi et puis xethorn m'a fait remarqué que l'ancien faisait pâle figure alors ça a aussi été l'occasion de le restyler.
J'ai pour cela utiliser l'ancien style de bartelme.at qui a été mis sous GPL (?) et adapté pour en faire un thème WordPress. Je pensais pouvoir repartir de cette base mais l'auteur souffrait un peu trop de la divite et de la classite pour que ça convienne à un exemple. J'ai donc repris certains des conseils donnés ci-dessus pour concevoir la css en question (version non compressée). J'ai essayé de la rendre aussi claire que possible pour que vous puissiez facilement identifier les astuces et les gains qu'elles peuvent procurer.
Pour finir, je ne pense pas qu'il y ait de meilleure conclusion que celle du livre :
N'oubliez pas que l'emploi de styles CSS n'est qu'une partie d'un tout : à quoi bon rechercher les avantages de CSS et de la séparation entre contenu et mise en forme si c'est pour ignorer d'autres principes fondamentaux des bonnes pratiques : propreté du code, sémantique et bon usage des balises, intuitivité de la navigation, conception aux normes.
En somme, développer un site web respectant les normes et les bonnes pratiques n'a rien d'obligatoire ; c'est juste essentiel.
Ressources
Bon même en limitant les liens ça en fait pas mal... en voici encore quelques uns qu'il ne faut pas louper :
En attendant peut-être un jour un véritable framework CSS digne de ce nom...