davidbgk
/
larlet-fr-david

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&#39;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

<p>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 «&nbsp;<a href="http://www.editions-eyrolles.com/Livre/9782212119763/css-2-pratique-du-design-web"><abbr title="Cascading Style Sheets">CSS</abbr> 2 Pratique du web design</a> » de <a href="http://www.alsacreations.com/">Raphaël Goetter</a> pour faire coup double avec une critique et un peu de contenu dans la foulée.</p>

<h2>Critique du livre</h2>


<p>Difficile de trouver quelque chose à redire de cet ouvrage. Tout y est, ou plutôt&nbsp;: <strong>tout ce qui mérite d'y être y est</strong>. 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é.</p>


<p>Ce qui m'a surtout plu dans ce livre, c'est l'<strong>approche à la fois didactique et militante</strong> 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&nbsp;: par l'éducation. J'ai retrouvé dans ces pages le parfait reflet de la <a href="http://css.alsacreations.com/">communauté AlsacreationS</a> et de son dynamisme. Pour couronner le tout, il y a même un <a href="http://www.alsacreations.com/livre/">site consacrée au livre</a>.</p>


<p>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 <a href="http://planet.inertie.org/">#openweb</a> je deviens peut-être un peu trop exigeant aussi :-).</p>


<h2>Des CSS de qualité</h2>


<p>L'idée d'un tel billet est partie du constat qu'il existait énormément de <a href="http://www.ultra-fluide.com/ressources/css/css-hacks.htm">ressources</a> <a href="http://www.webdevout.net/css-hacks">listant</a> <a href="http://orderedlist.com/articles/clearing-floats-the-fne-method">les hacks</a> <a href="http://css-discuss.incutio.com/?page=CssHack">les plus connus</a> mais très peu faisant référence aux bonnes pratiques ou aux règles d'organisation pour «&nbsp;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.</p>


<h3>Un modèle pour gagner du temps</h3>


<p>Les designs se suivent et se ressemblent bien souvent (au niveau des CSS en tout cas).</p>

<ul>
<li><strong>Remise à zéro</strong>&nbsp;: il existe <a href="http://kurafire.net/log/archive/2005/07/26/starting-css-revisited">tout</a> <a href="http://developer.yahoo.com/yui/reset/">un tas</a> de <strong>reset.css</strong>, la dernière en date est probablement <a href="http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/">celle d'Eric Meyer</a> que j'utilise maintenant. C'est un peu bourrin car il faut vraiment tout redéfinir mais la qualité a un prix :-)&nbsp;;</li>
<li><strong>Hacks usuels</strong>&nbsp;: 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 <a href="http://www.positioniseverything.net/easyclearing.html">certains</a> qui <a href="http://www.svendtofte.com/code/max_width_in_ie/">reviennent</a> <a href="http://tantek.com/CSS/Examples/boxmodelhack.html">fréquemment</a> et il est toujours bon de les avoir sous la main&nbsp;;</li>
<li><strong>Layout général</strong>&nbsp;: les sites de layouts pullulent, <a href="http://blog.html.it/layoutgala/">LayoutGala</a> est pas trop mal pour ça, tout dépend de vos besoins.</li>
</ul>

<h3>S'organiser pour s'y retrouver</h3>


<p>Un fichier CSS peut devenir très long, marre de scroller à tout va&nbsp;?</p>

<ul>
<li><strong>Indentation, vers des CSS pythoniques</strong>&nbsp;: rassurez-vous j'utilisais cette technique avant de faire du python&nbsp;! 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)&nbsp;;</li>
<li><strong>Agencement et lisibilité</strong>&nbsp;: 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&nbsp;;</li>
<li><strong>Fichiers séparés... ou pas</strong>&nbsp;: 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).</li>
</ul>

<h3>Pérennité et documentation</h3>


<p>Si vous travaillez à plusieurs sur un gros projet, ces conseils sont vraiment importants.</p>

<ul>
<li><strong>Styleguide et template&nbsp;: le duo gagnant</strong>&nbsp;: je n'arrive plus à trouver le lien original sur la définition d'un styleguide en CSS mais concrètement ça <a href="http://www.kevo.com/styleGuide.html">ressemble à ça</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&nbsp;;</li>
<li><strong>Documentation, pensez aux autres !</strong>&nbsp;: vous venez de passer <del>une</del> deux heures sur un bug <abbr title="Internet Explorer">IE</abbr> récalcitrant et vous remarquez sa réapparition quelques jours plus tard... n'allez pas frapper votre collègues, documentez vos bugfix ou mieux&nbsp;: faites des tests&nbsp;;</li>
<li><strong>Des tests pour les cas critiques</strong>&nbsp;: 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 ;-)).</li>
</ul>

<h3>Optimisations finales</h3>


<p>Prêt à mettre en ligne&nbsp;? Il est temps d'optimiser.</p>

<ul>
<li><strong>Utilisez les propriétés générales</strong>&nbsp;: utilisez font, padding, margin et non font-family, margin-left, padding-bottom par exemple, c'est assez <a href="http://www.sitepoint.com/article/introduction-css-shorthand">bien documenté</a> <a href="http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/">ailleurs</a>&nbsp;;</li>
<li><strong>Utilisez la cascade</strong>&nbsp;: 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 <strong>class</strong> ou les <strong>div</strong> 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&nbsp;;</li>
<li><strong>Compressez tout ça</strong>&nbsp;: 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&nbsp;? Il existe de nombreux outils qui sont heureusement <a href="http://www.bloggingpro.com/archives/2006/08/17/css-optimization/">comparés sur cette page</a>. J'utilise généralement <a href="http://www.cleancss.com/">CleanCSS</a> car <a href="http://iceyboard.no-ip.org/projects/css_compressor">CSS Compressor</a> 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.</li>
</ul>

<h2>Exemple concret</h2>


<p>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 «&nbsp;<a href="http://david.larlet.fr/">Profil (CV) de David Larlet, concepteur d'applications web</a> », je voulais qu'il ait <strong>un contenu plus proche de ce que je fais, de ce que je suis</strong>, un peu moins formel aussi et puis <a href="http://silent-strength.com/">xethorn</a> m'a fait remarqué que l'ancien faisait pâle figure alors ça a aussi été l'occasion de le restyler.</p>


<p>J'ai pour cela utiliser l'ancien style de <a href="http://www.bartelme.at/">bartelme.at</a> qui a été mis sous <abbr title="General Public License">GPL</abbr> (?) et adapté pour en faire <a href="http://www.ilemoned.com/wordpress/wptheme-dark/">un thème WordPress</a>. 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 <a href="http://media.larlet.fr/david/css/style.css">la css en question</a> (version non compressée). <strong>J'ai essayé de la rendre aussi claire que possible pour que vous puissiez facilement identifier les astuces</strong> et les gains qu'elles peuvent procurer.</p>


<p>Pour finir, je ne pense pas qu'il y ait de meilleure conclusion que celle du livre&nbsp;:</p>


<blockquote><p>N'oubliez pas que l'emploi de styles CSS n'est qu'une partie d'un tout&nbsp;: à 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&nbsp;: propreté du code, sémantique et bon usage des balises, intuitivité de la navigation, conception aux normes.</p>
<p>
En somme, développer un site web respectant les normes et les bonnes pratiques n'a rien d'obligatoire&nbsp;; <strong>c'est juste essentiel</strong>.</p></blockquote>


<h3>Ressources</h3>


<p>Bon même en limitant les liens ça en fait pas mal... en voici encore quelques uns qu'il ne faut pas louper&nbsp;:</p>

<ul>
<li><a href="http://leftjustified.net/site-in-an-hour/">Site in an hour</a> (présentation d'une qualité exceptionnelle)</li>
<li><a href="http://www.456bereastreet.com/archive/200610/useful_tips_for_writing_efficient_css/">Useful tips for writing efficient CSS</a></li>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml">Ten CSS tricks you may not know</a></li>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml">Ten more CSS tricks you may not know</a></li>
<li><a href="http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/">70 Expert Ideas For Better CSS Coding</a></li>
</ul>

<p>En attendant peut-être un jour <a href="http://www.contentwithstyle.co.uk/Articles/17/a-css-framework/">un véritable</a> <a href="http://www.wymstyle.org/fr/">framework CSS</a> <a href="http://www.yaml.de/" hreflang="de">digne de ce nom</a>...</p>