Appel à contribution: un guide stylistique pour HTML et CSS

Introduction

Pour beaucoup de langages de programmation, il existe des guides stylistiques ou conventions de codage qui décrivent une «bonne manière» de coder avec le langage en question. Comme le rappelait Christian Heilmann à Paris Web 2007, les équipes efficaces suivent des standards. Il s’agit bien sûr des standards du Web, mais aussi de standards ou conventions internes.

Pourquoi ne pas proposer un guide stylistique pour HTML et CSS?
C'est le projet auquel je vous propose de participer.

Qu’est-ce qu’un guide stylistique?

Les guides stylistiques sont des documents composés de directives sur la bonne manière de rédiger un texte. Par exemple, la plupart des grands journaux ont un guide stylistique ou manuel stylistique. Il existe des manuels stylistiques pour les documents universitaires de telle ou telle discipline, pour les documents techniques dans divers secteurs industriels, etc.

En programmation, il existe également quelques guides stylistiques. Certains sont officiels (proposés par l'équipe qui crée et maintiens le langage), d’autres proposés par divers intervenants. On parlera également de conventions de codage (coding conventions ou coding standards).

Voici par exemple le guide stylistique (officiel) pour le langage Python, ou encore un guide stylistique pour PHP.

Pourquoi un guide stylistique pour HTML et CSS?

Lorsque plusieurs personnes interviennent sur un même projet, et en particulier au sein d'une même équipe, il peut être difficile pour une personne de reprendre un projet commencé par une autre, ou pour deux personnes de travailler efficacement sur un même code. Surtout si les pratiques de codage sont très différentes.

Le but serait de produire non pas une norme mais un document de référence, qui décrirait une manière précise de rédiger du code HTML et CSS. Ce document pourrait alors être utilisé comme référence interne pour agence web souhaitant uniformiser les pratiques de ses collaborateurs et faciliter l'intégration de nouveaux employés. Un indépendant pourrait suivre ce guide stylistique et s'y référer au moment de livrer son travail, en conseillant aux autres intervenants de le suivre s'il doit y avoir des allers-retours. Etc.

Attention: un guide stylistique ou des conventions de codage ne sont pas des normes ou des standards ou même titre que les recommandations du W3C! Il s’agit de recueil de bonnes pratiques, auxquelles tout un chacun est libre de se conformer ou non.

Comment participer?

Pour rédiger ce document, il me semble important de me fonder non pas sur mes propres pratiques (même si je les trouve bonnes à 90% ;)), mais sur un éventail de pratiques provenant de divers professionnels du Web.

Je souhaite donc récolter des informations sur les pratiques des uns et des autres, pour confronter les pratiques et vérifier si certaines tendances se dégagent. C’est là l’objectif de cet appel à contribution.

Répondre au questionnaire sur les pratiques

Il s’agit de répondre à un questionnaire relativement ouvert sur différents points de style ou de méthode: indentation du code, utilisation des espaces et commentaires, nommage des classes et identifiants, utilisation des classes et identifiants en fonction des contenus, etc.

Les questions sont ouvertes (pas de réponses de type «oui/non»), et vous pouvez répondre très brièvement ou de manière plus détaillée (avec de brefs exemples de code si nécessaire).

Vous trouverez le questionnaire et des instructions pour y répondre un peu plus bas.

Merci d’avance pour votre contribution. :)

Participer au dépouillement et à l’élaboration du document final

Je prévois pour l’instant de réaliser le dépouillement et un premier jet du guide stylistique moi-même, avec l’aide éventuelle des modérateurs d’Alsacréations. Ce premier jet (version alpha ;)) sera alors soumis à commentaires.

Si vous souhaitez participer activement à ce premier jet, contactez-moi (cf. adresse en fin de page). En cas de demandes nombreuses, un wiki ou autre système de collaboration pourra éventuellement être mis en place.

Questionnaire

Questions relatives à HTML:

1. Quelle versions de HTML ou XHTML utilisez-vous? Quelle version priviligiez-vous?
2. Respectez-vous des règles strictes pour l’écriture des balises et attributs HTML même en HTML 4.01 (balises systématiquement en majuscules ou systématiquement en minuscules, pas de guillemets ou single quotes ou double quotes pour tous les attributs, etc.)?
3. Quel usage faites-vous de la validation du code HTML?
4. Quel usage faites vous des commentaires HTML?
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)?
6. Quel usage faites-vous des éléments génériques DIV et SPAN?
7. Avez-vous une convention de nommage pour les classes et identifiants (ou une convention différente pour chaque)? Choix des mots, minuscules, majuscules alternées, tirets, traits de soulignement, etc.
8. Dans quels cas utilisez vous plutôt les classes ou plutôt les identifiants?

Note: la question de l’indentation du code n’est pas abordée. En effet, pour la plupart des sites web elle ne peut pas être gérée de manière précise, à cause de l’utilisation de nombreux scripts, systèmes de templates, etc.

Questions relatives à CSS:

1. Quel usage faites-vous de la validation CSS?
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.)?
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?
4. Comment utilisez-vous les espaces, retours à la ligne, lignes vides et indentations? Pouvez-vous fournir un exemple-type?
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?
6. Utilisez-vous des indentations multiples (jusqu’à plusieurs niveaux d’indentation) pour, par exemple, refléter la structure du code HTML?
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)?
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?
9. Dans une feuille de styles relativement longue (pus de quelques dizaines de ligne, et jusqu’à des centaines ou milliers de lignes), comment organisez-vous les différents styles? Utilisez vous des commentaires introduisant différentes parties, une «table des matières», ou d’autres procédés.
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.?
11. Utilisez-vous des hacks CSS? Lesquels en particulier?
12. Utilisez-vous les commentaires conditionnels pour Internet Explorer? Si oui, comment procédez-vous?