Même si certains motifs se détachent parfois du lot, les conventions de développement ou d’intégration restent quelque chose de très personnel. La majorité des langages, et même des framework ont des méthodes gravées dans la pierre que chacun est fortement invité à respecter. Ce n’est pourtant pas le cas pour le couple HTML/CSS, et c’est la raison pour laquelle Florent Verschelde et l’équipe d’Alsacréations ont entrepris de mettre en place un guide stylistique de l’intégration HTML. Ils ont pour cela proposé un appel à contribution sous la forme d’un questionnaire en deux parties auquel je réponds à mon tour.

Questions relatives à HTML

1. Quelle versions de HTML ou XHTML utilisez-vous? Quelle version privilégiez-vous?

J’utilise quasiment exclusivement XHTML 1.0 stricte sur mes nouveaux projets. Quand je reprends un existant, ou que je dois utiliser des balises supprimées en XHTML 1.0 stricte, je me cantonne au transitionnel.

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

J’utilise des conventions assez strictes : balises et attributs en lowercase. J’utilise des guillemets pour les chaînes de caractères (attribut alt ou title par exemple) et des single quotes pour les noms de classes, d’ID, ou pour les URL dans les liens et les images.

3. Quel usage faites-vous de la validation du code HTML?

J’utilise le validateur à la fin du montage d’une page, par acquit de conscience, mais de toutes manières, mon markup est toujours naturellement impeccable ;-).

Je considère la validation comme un indicateur de qualité parmi d’autres, pas comme une fin en soi. Je peux avoir une mise en page en tableaux ou une soupe de balises imbitable parfaitement valides, mais totalement inaccessibles ou pas sémantique du tout.

4. Quel usage faites vous des commentaires HTML?

J’en utilise le moins possible. Comme avait coutume de le dire mon prof de TDD, un bon code n’a pas besoin de commentaires (et les tests sont le meilleur moyen d’expliquer le code). En fait, je ne les utilise que pour marquer la fermeture des blocs principaux, et encore je préfère compter sur l’indentation et les fonctionnalités de dissimulation des blocs de mon éditeur favori pour obtenir cette information.

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)?

J’essaie d’utiliser un maximum d’éléments en fonction de leur valeur sémantique. J’abuse clairement des listes non ordonnées ou du triplet dl, dt, dd dans mes menus quand le cas se présente. Il y a en revanche certaines balises que j’évite au maximum, comme frame ou iframe par exemple.

J’utilise div pour marquer les grands blocs de la structure de mon site, et le p afin de placer du texte qui n’a pas sa place dans une balise de titre, un address

5. Quel usage faites-vous des éléments génériques DIV et SPAN?

Pour l’usage que j’ai de la div, cf. paragraphe précédent. J’utilise le span de deux manières différentes :

  • Soit quand je veux appliquer un display: block; (généralement avec un float) dans un élément inline contenu dans un bloc sans casser la logique du flux d’informations. Un bon exemple est celui des boites à bords arrondis extensibles décrites par Dan Cederholm dans son livre Bulletproof Webdesign
  • Soit quand je veux appliquer du style a un élément significatif au sein d’un bloc textuel (titre, paragraphe).
6. 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.

A la première question, je répondrai oui sans hésiter, et je répondrai même oui, sans les avoir consultés, pour mes coreligionnaires en subversions radiophoniques, Luis Rego et Claude Villers.

Pour les id, j’utilise bêtement les noms qui me semblent les plus appropriés en fonction de leur utilisation dans la page : search, wrapper, page, sidebar, menu… Pour les classes, je les désigne par ce qu’elles font : align-left, align-right… ou aux éléments auxquels elles s’appliquent : submit, cancel…

Dans tous les cas, j’utilise de l’anglais en minuscules, et je sépare les mots par un “-“.

7. Dans quels cas utilisez vous plutôt les classes ou plutôt les identifiants?

J’utilise les identifiants quand le style s’applique à l’ensemble du contenu HTML inclus dans l’élément nommé, et les classes quand je dois appliquer un même style à un même élément réparti un peu partout dans la page.

Questions relatives à CSS

1. Quel usage faites-vous de la validation CSS ?

Je ne l’utilise pas. Peut-être à tort, mais j’ai suffisamment confiance dans mon code pour m’en passer.

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

Je les utilise afin de séparer les principaux blocs du site, mais globalement assez peu. Je viens en revanche de découvrir le modus operandi d’Hélène dans le thème qu’elle avait fait pour Typo, et je pense que je vais l’utiliser sur les grosses feuilles de style :

  • Une table des matières en tête de feuille.
  • Un commentaire pour chaque titre de partie ou de sous partie
/*
1. Body
  2. Wrapper
    3. Header / #header
      3.1. Logo / #logo
      3.2. Menu / #menu
    4. Page
      4.1. Content / #content
        4.1.1. Post / .atomentry
        4.1.2. Comments 
      4.2. Sidebar / #sidebar
        4.2.1. Search / #search
        4.2.2. Loading / #loading
        4.2.4. Results / #results
        4.2.5. Categories / #categories
    5. Footer / #footer
*/
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 ?

Je ne fais pas tellement attention à la verbosité de mes sélecteurs, mais plus au sens qu’ils ont et à leur clarté, histoire que le code reste bien lisible et compréhensible.

4. Comment utilisez-vous les espaces, retours à la ligne, lignes vides et indentations? Pouvez-vous fournir un exemple-type ?

Je saute une ligne entre chaque classe ou identifiant, et deux lignes entre la dernière classe d’une partie et la partie suivante. Et sinon j’indente à 2 avec des espaces et non des tabulations. Je mets toujours un espace entre les deux points et l’attribut.

.classe {
  display: block;
}

.classe2 {
  display: inline;
}


/* Partie suivante */
#identifiant {
  color: #f00;
}
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?

Je suis structure du document HTML autant que faire se peut.

6. Utilisez-vous des indentations multiples (jusqu’à plusieurs niveaux d’indentation) pour, par exemple, refléter la structure du code HTML ?

Non.

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 un maximum de raccourcis, dès lors que cela reste compréhensible, notamment pour les propriétés background, border, font, margin et padding.

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 ?

Pas consciemment en tout cas, mais je viens d’aller jeter un oeil, et en fait, je mets visiblement toujours les propriétés CSS dans le même ordre :

  • Font
  • Structure
  • Couleurs
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 ?

Je sépare en plusieurs feuilles, que je concatène ensuite selon les besoins afin d’économiser des téléchargements :

  • Structure générale, commune à toutes les pages.
  • Fonts et couleurs générales communes à toutes les pages.
  • Structure spécifiques aux pages ou aux “univers”.
  • Fonts et couleurs spécifiques aux pages ou aux “univers”.
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. ?

Cf. paragraphe précédent.

11. Utilisez-vous des hacks CSS ?

Le moins possible, je préfère à la limite passer par les commentaires conditionnels quand je n’ai vraiment pas le choix.

12. Utilisez-vous les commentaires conditionnels pour Internet Explorer? Si oui, comment procédez-vous?

J’inclus des fichiers spécifiques à IE6 ou IE7 en fonction des besoins, mais dans la mesure du possible, j’essaie de contourner. Ne faisant pas d’intégration en agence, ou en freelance, à titre professionnel, je suis assez peu lié par les sociétés de design qui vendent le reflet exact d’un site, en oubliant parfois les réalités du web. Je me permets au contraire un peu de dégradation si ça m’évite de commettre des horreurs.

Perry the Platypus wants you to subscribe now! Even if you don't visit my site on a regular basis, you can get the latest posts delivered to you for free via Email: