Contribution au guide stylistique pour HTML et CSS

Florent Verschelde lance le projet de rédiger un guide stylistique (charte rédactionnelle ou conventions de codage) pour les langages HTML et surtout CSS sous l’égide d’Alsacreations. Une description de ce projet est disponible dans ce document. Voici ma modeste contribution à cette première étape du projet qui consiste en deux séries de questions pour sonder les professionnels du web sur leurs habitudes de travail en matière de mise en forme du code.

### Comment j’écris mon HTML

1. Quelle version de HTML ou XHTML utilisez-vous ?
: Même si je m’applique à écrire du XHTML 1.0 strict, j’utilise le doctype XHTML 1.0 Transitional qui permet une certaine souplesse quand on travaille sur des documents susceptibles d’accueillir toutes sortes de fioritures comme des `target=_blank` ou des `iframe` en veux-tu en voilà 😉

2. Respectez-vous des règles strictes pour l’écriture des balises et attributs HTML même en HTML 4.01 ?
: Oui, je me conforme aux exigeances imposées par le XHTML strict 1.0 : écriture des balises en minuscules, attributs entre guillemets, attributs `selected` ou `checked` doublés (`selected= »selected »` ou `checked= »checked »`), auto-fermeture des balises `img`, `br` ou `input`, etc.

3. Quel usage faites-vous de la validation du code HTML ?
: Je prends soin de valider mes pages web régulièrement dans une optique de *débuggage* du code plutôt que pour la validation elle-même qui ne garantit pas que le document soit lisible par un être humain.

4. Quel usage faites vous des commentaires HTML ?
: Essentiellement pour mettre en valeur les parties principales de la page et indiquer la fin des blocs structurels. J’utilise aussi les lignes vides pour séparer certaines parties du code pour améliorer la lisibilité :

5. Quels sont les éléments HTML que vous utilisez le plus ? Y a-t-il une logique précise pour l’utilisation de tel ou tel élément (un P plutôt qu’un DIV, par exemple) ?
: En règle général, j’essaie de suivre la logique interne du contenu pour que la page ressemble à quelque chose même si les feuilles de styles sont désactivées : j’abuse des listes ordonnées ou non, des listes de définition, des paragraphes, etc. L’idée est de donner du relief à la page web pour faire ressortir la structure des idées.
: Toutefois, il m’arrive d’utiliser une `div` à la place d’un `p` lorsque le texte à baliser ne contient qu’une ligne et/ou qu’il est isolé sémantiquement parlant. C’est le cas de la *baseline* notamment.
: Dans certains cas, il peut m’arriver d’ajouter un `span` :

L’avantage ? Dans certaines mises en forme, ça permet de donner une largeur explicite à la balise `div`, tout en jouant à volonté sur le `padding` du `span` sans casser la mise en page à cause d’une mauvaise interprétation d’un modèle de boite pas toujours intuitif.

6. Quel usage faites-vous des éléments génériques DIV et SPAN ?
: Même si cela semble aller à l’encontre de ma réponse précédente, je commence par structurer ma page dans les grandes lignes avec la position des différents « blocs » à l’esprit. Comme il s’agit souvent de découper un *template* réalisé sous Photoshop, il serait hypocrite de faire comme si seul le sens avait de l’importance… Je place donc mes `div` dans mon document HTML puis je les reportent dans mon fichier CSS.
: Les balises `div` me servent surtout à `div`iser le contenu en blocs gérés ensuite via la feuille de style : création de colonnes, application de *background*, etc. J’essaie de garder une logique « sémantique » à mes découpages, même si la plupart du temps, il faut bien avouer que certains bloc sont réunis uniquement à des fins de présentation ou de position dans le code…
: J’utilise assez peu la balise `span` : elle me sert le plus souvent à donner une couleur différente à une portion de texte ou à intégrer les microformats.

7. Avez-vous une convention de nommage pour les classes et identifiants ?
: Je suis en pleine transition sur cette question. Je me mets doucement à utiliser les futures balises du HTML5 en tant qu’identifiants ou classes pour structurer mes pages web : *#header*, *#footer*, *.nav*, *.article*, *.aside*, *h1*, *h2*…, *.section*, etc.
: Pour les identifiants ou classes composés de deux termes ou plus, j’utilise le tiret : #sidebar-top ou #main-content-bottom, par exemple.
: Comme vous pouvez le remarquer, j’utilise plutôt des termes anglo-saxons, généralement plus concis et surtout sans accent : que donnerait en effet une classe `.palais-des-congres` ^_^v

8. Dans quels cas utilisez-vous plutôt les classes ou plutôt les identifiants?
: Tout dépend du document, mais je privilégie les classes autant que possible. Ainsi, pour atteindre les élement *menu*, j’utilise plus volontiers :

#header .menu {…}
#sidebar-1 .menu {…}

plutôt que :

#menu-1 {…}
#menu-2 {…}

Ce qui permet d’avoir des éléments communs non dupliqués pour la classe *.menu*. Toutefois, en fonction des projets, la deuxième solution est parfois préférable. Question de souplesse.

### Comment j’écris mes CSS

1. Quel usage faites-vous de la validation CSS ?
: Je n’utilise que très rarement la validation pour mes feuilles de styles : les fautes de syntaxes sont généralement rédhibitoires (le comportement voulu n’apparait pas) et je sais généralement quand j’utilise une propriété « propriétaire »…

2. Comment utilisez-vous les commentaires en CSS ? Avez-vous des «styles» précis pour différents types de commentaires (capitales, étoiles ou autres symboles dans le commentaire, etc.) ?
: Un exemple vaut mieux qu’un long discours :

/*———————————————————————–
Nom de la feuille de style : styles.css
Date création : le 02/11/2008
Description : Feuille de style principale pour le projet xxx
Sommaire :
@reset
@utilitaires
@document
———————————————————————–*/

/*———————————————————————–
@RESET
———————————————————————–*/

@import « css/risette.css »;

/*———————————————————————–
@UTILITAIRES
———————————————————————–*/
.prout {
voice-family: announcer, male;
}

/*———————————————————————–
@DOCUMENT
———————————————————————–*/
#container {
margin: 0 toto;
}

#header { /* ie.css */
height: 75px;
}
#logo {
background: url(img/logo.png) no-repeat;
}

3. Utilisez-vous des sélecteurs «verbeux» (le plus précis possibles et reprenant le contexte d’utilisation de l’élément), ou au contraire les plus courts possibles ? Ou bien une solution intermédiaire ?
: Quand je ne suis pas le seul à intervenir sur le projet (la plupart du temps) je suis assez « verbeux » :

#header #logo h1 {…}

ou

h1#logo {…}

Voire

#logo {…}

plutôt que

h1 {…}

Note : pour des questions de performance, il est préférable d’utiliser la forme `#h1-logo {…}` qui semble la syntaxe préférée des navigateurs.

4. Comment utilisez-vous les espaces, retours à la ligne, lignes vides et indentations ? Pouvez-vous fournir un exemple-type ?
: Voici un exemple assez représentatif de mes habitudes en la matière :

#container {
width: 950px;
margin: 0 auto;
font: 1.2em/1.5 Helvetica, Arial, sans-serif;
}

#header {
width: 950px;
height: 95px;
background: transparent url() no-repeat center;
}

#main-content {
overflow: hidden; /* zoom: 1; dans ie.css */
}
#content {
float: left;
width: 700px;
margin-right: 20px;
}
#sidebar {
float: left;
width: 230px;
}

#footer {
width: 950px;
clear: both;
}

J’ai pris l’habitude de mettre un espace entre les deux-points et la valeur pour des raisons de lisibilité. Par ailleurs, je laisse toujours le point-virgule à la fin de la dernière déclaration. De nombreux intégrateurs et développeurs trouvent plus lisible d’écrire :

#content {float:left;width:700px;margin-right:20px;}
#sidebar {float:left;width:230px;}

Leur argument principal est que cette disposition permet de voir plus de sélecteurs et d’économiser des lignes. Je tiens à rappeller que de nombreux logiciels (Dreamweaver, TopStyle Light, etc.) disposent d’une telle vue. Sans compter des services comme cleancss qui le font automatiquement !

5. Regroupez-vous les blocs de déclarations (sélecteurs + leurs propriétés) de manière logique ou prévisible? Quelle est la logique utilisée, et dans quel ordre les placez-vous ?
: J’essaie de suivre au mieux la structure du document HTML lui-même. Comme le montre l’exemple ci-dessus, sauf si je dois regrouper des déclarations pour leur attribuer des propriétés communes. Dans ce cas, je les place comme suit :

#header,
#footer {
width: 100%;
}

#header {
padding: 3em;
}
#content {
width: 950px;
}
#footer{
padding: 1em 3em;
}

6. Utilisez-vous des indentations multiples (jusqu’à plusieurs niveaux d’indentation) pour, par exemple, refléter la structure du code HTML ?
: Oui, voir l’exemple donné plus haut 😉

7. Utilisez-vous les propriétés de raccourci ? Si oui, les utilisez-vous systématiquement et en priorité, ou seulement lorsque cela permet de gagner quelques déclarations (propriété + valeur) ?
: j’utilise les raccourcis le plus souvent possible, notamment pour les propriétés `font`, `background`, `margin`, `padding`, `list-style` et `border`.

8. Respectez-vous un ordre précis pour les propriétés CSS (ordre alphabétique, ordre «logique», etc.) ? Si besoin, pouvez-vous le détailler ?
: Je place d’abord les propriétés les plus impactantes sur le design comme `float`, `width`, `height`, etc. et je place ensuite les plus longues à la fin : `border`, `list-style`, `font`, `background`, etc.
: Ca tombe bien, car ces dernières sont souvent des propriétés plus visuelles que structurelles, ce qui permet de séparer le fond de la forme au sein même des déclarations CSS !

9. Dans une feuille de styles relativement longue (plus de quelques dizaines de ligne, et jusqu’à des centaines ou milliers de lignes), comment organisez-vous les différents styles ?
: Si le nombre de page est faible mais que la feuille de style CSS est très longue, j’utilise les commentaires pour séparer les différentes parties.
: Si le nombre de page est important, je fais une feuille de style par page après avoir réunis les éléments communs dans *styles.css*, soit : *index.css* pour *index.php*, *inscription.css* pour *inscription.php* ou 404.css pour 404.php, etc.

10. Utilisez-vous plusieurs feuilles de styles pour un projet de «petit» site (moins de dix pages-type). Utilisez-vous plusieurs feuilles de styles pour des projets plus conséquents? Comment séparez-vous les différents styles: par type de propriétés CSS, par type de page, etc. ?
: J’ai essayé plusieurs méthodes pour devenir pragmatique : je fais au mieux en fonction du projet, du délai et du nombre de personnes susceptibles d’intervenir sur le fichier. Un découpage des CSS comme *typography.css*, *layout.css*, *html.css*, *color.css*, etc. suppose des habitudes de travail en commun et des connaissances similaires en CSS, ce qui n’est pas toujours le cas quand on travaille en équipe. De fait, le découpage par page (cf. réponse 9) est souvent mieux compris donc les pertes de temps et les erreurs sont moins nombreuses.

11. Utilisez-vous des hacks CSS ?
: Oui et non. Voir plus bas 😉

12. Utilisez-vous les commentaires conditionnels pour Internet Explorer? Si oui, comment procédez-vous?
: En général, j’utilise un commentaire conditionnel pour cibler les versions inférieures à Internet Explorer 8 :

Ensuite, **à l’intérieur de ie.css**, j’utilise des hacks CSS pour cibler IE6 ou IE7 :

div { Pour s’adresser à toutes les versions inférieures à IE8 }
* html div { Pour s’adresser à IE6 }
html>body div { Pour s’adresser à IE7 }

En supposant bien sûr que IE8 se comporte à l’avenir selon les standards du web. Dans le cas contraire, en fonction des cas, il faudra soit mettre à niveau le commentaire conditionnel (lte IE 8) et trouver un hack CSS spécifique à IE8 différent à la fois de IE6 et IE7, soit lier une feuille de style spécifique pour IE8 en plus de celle prévue pour les versions inférieures d’Internet Explorer…

### En bref

J’ai pris un réel plaisir à me pencher sur ces questions et comme je ne voudrais pas être le seul à en profiter, je vous invite à participer à ce projet, que vous soyez professionnels ou amateurs éclairés ! L’important est que vous pratiquiez régulièrement les langages HTML et CSS pour avoir développé quelques habitudes et que vous ayez envie de les partager.