David Larlet : artisan, contributeur et citoyen.


Archives du site biologeek.com. Publications récentes.

★ Des CSS de qualité

vignette

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...

Articles peut-être en rapport


Commentaires

Pierre le 22/05/2007 :

Encore une fois, un article clair et concis fourmillant de liens... j'adore !

J'ai encore appris des trucs, merci beaucoup ;)

NiCoS le 22/05/2007 :

+1 :-)

Que ferait-on sans David... ;-P

David le 22/05/2007 :

Quel coïncidence !

Vendredi je me suis dis qu'il me faudrai un bouquin sur les CSS. Il y avait un article sur "Zen des CSS" dans Biologeek, mais ça ne semblait pas me correspondre. Finalement un ami chef de projet multimédia me conseille le bouquin d'Alsacréation. Je le commande ce matin.

Puis je vais faire un tour sur mon netvibes et là tu viens me confirmer dans mon choix : il y a des jours ce site est un Graal pour moi ;-) !

Les grands esprits pythoniques se rencontrent... !

olivier G. le 22/05/2007 :

Une autre bonne pratique consiste à trier les propriétés CSS dans l'ordre alphabétique, ça permet de les retrouver plus facilement.

Personnelement, je surindente en plus les 5 propriétés qui dépendent du positionnement (et je ne peux pas faire d'exemple, les espace de début de ligne sont retirés par dotclear).

Daniel R le 22/05/2007 :

Salut, David

lecteur régulier de ton blog, ça me fait bien plaisir de te voir mentionner WYMstyle, surtout quand je vois l'intitulé de ton article :)

Un framework CSS digne de ce nom ?
J'utilise déjà la 0.2 de WYMstyle depuis plus de 1 an, pour de nombreux sites en production, ce qui me permet de gagner un temps considérable, et d'avoir un code bien plus facile à gérer et à réutililser d'un projet à l'autre. Mais c'est vrai que WYMstyle, tout comme les autres frameworks il me semble, tent à enfermer le designer dans 'sa' logique. Il est souvent plus facile pour des layouts moins conventionnels de repartir à 0, et de se passer de frameworks.

Cependant, je pense de plus en plus que le framework CSS 'ultime'
doit avoir une couche logique de programmation (pour l'instant j'ai commencé à travailler sur une solution XML+XSL+PHP) qui permet de générer des layouts CSS complets et optimisés (fichiers CSS + XHTML) de manière vraiment simple et efficace.

On pourrait de cette manière générer des layouts XHTML+CSS vraiment sur mesure (jusqu'aux noms des id et class), intégrant par défaut une série de bonne pratiques (contrôle de l'ordre de la source, ...) et immédiatement compatibles tous browsers...

J'ai réussi à avoir quelques essais concluants, c'est de la pré-pré-pré alpha, mais le potentiel est bien là :-)
Je posterai quelques exemples sur mon blog quand j'aurai suffisamment progressé.

David, biologeek le 22/05/2007 :

@Pierre et NiCoS : mais c'est un plaisir :-)

@David : ça doit être la saison, c'est pas la première de la semaine !

@Olivier G. : beaucoup conseillent en effet de lister les propriétés dans un ordre prédéfini mais je n'ai jamais un bloc qui dépasse les 10 lignes donc j'ai du mal à en voir l'intérêt. Après ça doit être une question d'habitude mais tant que je l'ai facilement dans mon champ visuel ça me suffit.

@Daniel R. : merci pour ton commentaire (et heureux de te compter parmi mes lecteurs !) qui fait le point détaillé sur l'état de WYMstyle, pour être honnête je n'ai pas encore testé la solution actuelle mais je l'ai cité car il y a de l'idée et apparemment des idées tu en as encore ! Je ne peux que t'encourager à avancer sur ta nouvelle version bien que je mette un bémol sur le fait d'avoir un framework qui ne soit pas langage-agnostique...

C'est marrant car hier je me demandais justement si je ne pourrais pas automatiser la compression de la CSS car c'est une tâche assez fastidieuse... peut-être en js ?

Olivier G. le 22/05/2007 :

Ah tiens, une bonne habitude liée aux commentaires conditionnels et aux feuilles de styles spécifiques à IE qu'ils permettent : lorsque je surchage une valeur CSS dans la feuille IE, je l'indique dans la feuille générale par un /* !IE */ (ou /* !IE6 */ si ce n'est que dans la feuille de style pour IE 6).

Quand à l'ordre des valeurs, ça permet de savoir que si mon objet a une bordure, la règle CSS sera forcément en début de bloc. En fin de journée, on gagne beaucoup de temps...

Kagou le 22/05/2007 :

Encore un superbe article qui fait bien le point. J'ai découvert la css de remise à zéro de Eric Meyer, chose que je faisais naturellement mais franchement pas aussi bien.
Que de lectures en vue, et qui tombent au bon moment en plus pour moi ;)

Merci !

oakleaf le 22/05/2007 :

Merci :)

jp.fox le 22/05/2007 :

Merci David pour cet article excellent. Voici de bonnes bases pour quelqu'un comme moi qui voulait entrer un peu plus dans le vif du sujet et arrêter de "bidouiller" du CSS.

Nicofrand le 23/05/2007 :

Je ne connaissais pas CleanCSS , très utile pour vérifier merci du lien! D'ailleurs certains autres liens m'étaient également inconnus alors que très pratiques!

Saigon le 23/05/2007 :

Très bon article...un des meilleurs blog que j'ai pu lire jusqu'à présent....et comme pour certain je ne connaissais pas le morceau de css pour remettre à zéro :)

css4design le 24/05/2007 :

Organiser ses feuilles de style CSS

J'ai regardé l'organisation des CSS dans de nombreux CMS, de Dotclear à WordPress en passant par des plate-formes de e-commerce. Il n'y a pas deux feuilles de style qui partagent la même organisation Après quelques recherches, certaines

Raphael le 24/05/2007 :

Merci David pour cette critique plutôt positive, mais aussi et surtout pour l'article détaillé qui la complète.

Il y'a beaucoup de bonnes pratiques à suivre dans ton billet, même si je ne suis vraiment pas partisan du fameux reset CSS : plutôt que de tout mettre à zéro puis de redéfinir chacun des éléments qui le nécessitent (forcément), je préfère me limiter à définir une fois pour toutes ce dont j'ai besoin... avec quelques exceptions comme les ul et les form, qui sont souvent avantageusement "resetées".

Pour le reste, rien à redire !

PS : tiens, j'ai cru voir (commentaire n°3) une hérésie : un "alsacréationS" sans "s" final :D

David, biologeek le 24/05/2007 :

@Saigon : ça c'est du commentaire :')

@Raphael : mais merci à toi pour ce livre !

Concernant le reset, c'est vrai qu'il est pénible de devoir redéfinir chaque propriété comme strong ou sup mais sinon on finit toujours par oublier qu'un élément a telle propriété par défaut dans tel navigateur et c'est pour ça que je l'utilise. Après tout dépend de la complexité du site aussi... par exemple là pour un CV c'est un peu disproportionné à mon avis.

GandalfoS le 25/05/2007 :

Et dire que j'ai osé te donner un cours de XHTML/CSS ... c'est toi qui aurait du le faire ce cours :)

David, biologeek le 31/05/2007 :

Il y a parfois des commentaires qui laissent sans voix :-)

Tybho le 07/07/2007 :

Je tombe bien, un article concernant la pratique du reset CSS a justement été publié il y a quelques jours : blog.alsacreations.com/20...

Olivier Poète le 14/06/2008 :

Ce livre CSS2 est vraiment bien pour apprendre le CSS en plus du site AlsacréationS.
Merci Tybho pour le lien de l'article juste au-dessus qui est intéressant.

Pascale le 31/10/2008 :

Excellent merci beaucoup pour toutes ces infos :-)

Chat le 24/08/2009 :

Je recherchais justement à en savoir plus sur le css2 merci.

Riche le 15/09/2010 :

Merci, moi qui voulait foncer tête baissé dans le CSS3, je vais peut être commencer par bien comprendre le CSS tout court héhé^^

Download 5DFly Photo Design le 20/09/2010 :

et c'est pour ça que je l'utilise. Après tout dépend de la complexité du site aussi... par exemple là pour un CV c'est un peu disproportionné à mon avis.