Google a mis en ligne la version 2.1 de ses recommandations pour le code HTML/CSS : [ http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml ]( Google HTML/CSS Style Guide). Ces recommandations font partie du google-styleguide ; un ensemble de recos pour la programmation dans différents langages publiées par google.
L’objectif global est d’avoir un web plus rapide et mieux indexable. Ce qui profite à google et aux développeur autant qu’aux utilisateurs Voici les points que j’ai retenu.
Ne pas indiquer de protocole pour les ressources
Par exemple
background: url( http://www.google.com/images/example );doit devenir :
background: url( www.google.com/images/exemple );On supprime http: et https: lorsque l’on indique le chemin absolu d’une ressource ; pour résoudre les soucis possibles avec des contenus mixtes et gagner quelques octets sur le poids de la pages (sur des gros site, ce n’est pas négligeable !)
Utiliser des minuscules (bas de casse) dans le code
<IMG src='google.png' ALT='Google'>;doit être écrit :
<img src='google.png' alt='Google'>;Juste parce-que c’est très moche et que ça me fait plaisir de voir Google dire la même chose que moi là dessus !
Utiliser le mot-clef TODO
C’est vraiment sympa à utiliser en production et les principales EDI pour le web le reconnaissent. Si vous incluez des TODO dans votre code, vous pourrez le retrouver facilement.
Utiliser le HTML5 et un validateur !
http://validator.w3.org c’est gratuit et ça évite pas mal de soucis.
Il existe également [ http://jigsaw.w3.org/css-validator ]( en version css ).
Sémantique : utiliser les balises appropriées
L’exemple donnée est une div utilisée comme un lien. C’est mal !
<div onclick='goToRecommendations();'>All recommendations</div>Doit être :
<a href='goToRecommendations();'>All recommendations</a>Toujours avoir un fallback
Les attributs alt doivent êtres remplis. Les Médias doivent exister dans plusieurs version, accessibles crossplatform !
Ne pas utiliser de références d’entités
Ces monstruosités sont héritées du web du vingtième siècle. Si votre site est encodé en UTF8, il n’y a aucune raison de s’en servir ; sauf conditions très particulières.
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.Doit être :
The currency symbol for the Euro is “€”.Se passer des tags optionnels
C’est un gros bond mental pour la conception, tout habitués que nous y sommes, mais énormément de tags sont devenus otpionnel. htlm start/end, head strat/end, p end, body start/end, li end… Ne sont plus obligatoires.
[ http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission ]( La liste complète. )
Ainsi :
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
Sic.
</body>
</html>Peut devenir :
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
Qed.C’est plus rapide à coder, plus facile à lire une fois qu’on en a l’habitude et beaucoup plus léger.
Omettre les types d’attributs
De la même façon, les types d’attributs sont définis par défauts en html5. Une css sera par défaut ed type text/css ; un script sera par défaut de type text/javascript. Si vos fichiers correspondent au type par défaut, il n’est donc plus nécessaire de le mentionner.
<link rel='stylesheet' href='//www.google.com/css/maia.css' type='text/css'>Peut devenir :
<link rel='stylesheet' href='//www.google.com/css/maia.css'>Ne pas doubler la qualification d’un id ou d’une classe avec un type de sélecteur
Sauf si c’est absolument nécessaire, il n’est pas utile de rajouter le type de sélecteur devant la classe ou l’id.
ul#example {}
div.error {}Doit être :
#example {}
.error {}Fusionner les propriétés CSS, utiliser les “shorthands”
Beaucoup de propriétés css offrent la possibilité de regrouper plusieurs propriétés, ce sont les shorthand.
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;Doit devenir :
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;[ http://www.dustindiaz.com/css-shorthand ]( Un guide complet des shorthand )
0 n’a pas besoin d’unité
Les px, % et autres n’ont pas d’utilité derrière un 0 ; il suffit de le laisser sans unité.
Supprimer les guillemets dans les URI
Ils ne servent à rien, autant les supprimer :
@import url(//www.google.com/css/go.css)Ranger les déclarations par ordre alphabétique
Parce-que c’est plus simple de s’y retrouver après.
Mettre un point-virgule après chaque déclaration
Y compris après la dernière.
De la COHÉRENCE !
Je préfère le formatage monoligne pour mes CSS pour avoir un fichier plus rapide à parcourir (mais plus difficile à lire), chez google, ils vont à la ligne tout le temps. Je ne mets pas d’espace après les deux points d’une déclaration ; ils en mettent un. J’indente à la tabulation, ils indentent avec un double espace…
Mais tout ceci n’a pas d’importance. Pour ce genre de chose, personne n’a tord ou raison. La seule chose importante, c’est d’être cohérent et constant à travers tout votre code pour vous y retrouver.