Un guide stylistique pour HTML et CSS

Sans savoir sur quoi va aboutir son projet concrètement, je trouve le questionnaire de Florent intéressant. J’y répond ici pour garder une trace de mes habitudes de travail et éventuellement les partager.

Bon courage à lui pour la suite !

Questions relatives à HTML :

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

   XHTML Strict 1.0 principalement. Que je dégrade si besoin en fonction des contraintes du projet (newsletter par exemple), mais cela reste assez rare.

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

   Oui, je suis toujours les recommandations du XHTML Strict 1.0.

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

   Validation permanente en cours de projet avec l’extension Firefox HTML Validator. Puis validation finale avec le validateur du W3C en fin de projet.

   J’accorde une grande importance à cette validation qui me garantit que mon code ne comporte pas d’erreur de syntaxe. Je suis néanmoins bien conscient qu’il s’agit là uniquement d’un outil et qu’il ne fait pas tout.

4. Quel usage faites vous des commentaires HTML ?

   À tord, je n’en fais pas beaucoup. Éventuellement j’indique la fermeture des blocs par un

       </div><!-- /bloc -->
   

   J’utilise par contre les commentaires pour m’affranchir de certains bugs navigateurs parfois.

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

   Listes, paragraphes, division, titres… ce sont les basiques.

   Je m’efforce en fait d’employer au maximum (et parfois trop) les briques sémantiques qui nous sont offertes.

   Voici à l’inverse les éléments que je n’utilise pas (ou que très rarement) :

   • applet
   • b
   • base
   • col
   • colgroup
   • dfn
   • font
   • frame
   • frameset
   • i
   • iframe
   • noframes
   • noscript
   • s
   • strike
   • tt
   • u

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

   J’utilise principalement div avant de diviser ma structure en grandes parties.

   Et je me rabat sinon sur div et span lorsque j’ai besoin d’un conteneur (en bloc ou en ligne) et qu’aucune brique sémantique n’est plus appropriée.

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.

   Oui. J’ai pour habitude de nommer mes classes et identifiants :

   • en français,
   • séparés par des traits de soulignements,
   • et sans utiliser d’abréviation.

   Néanmoins, je m’efforce à trouver un terme le plus court et le plus concret possible.

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

   Je respecte bêtement la recommandation il me semble, à savoir :

   • identifiants pour les éléments uniques dans la page,
   • classes pour les éléments multiples.

Je rajouterais quand même que j’utilise :

• le plus souvent l’ISO-8859-15,
• des vraies tabulations (d’une largeur de 3 espaces).

Questions relatives à CSS:

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

   Tout comme je trouve cela important en HTML, je valide également mes CSS et ce, pour les mêmes raisons.

   En pratique, avec quelques astuces, on y parvient assez facilement mais il arrive évidemment de devoir user d’une propriété proriétaire ou autre. Dans ce cas, tant pis pour la validation.

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 précise les grandes sections de mon document et indique également les astuces mises en places.

   Ma syntaxe est la suivante :

   /* section
   ------------------------------------------------------------------------------*/
   selecteur_1
   {
       propriete_1:valeur_1; /* voir aussi dans ie.css */
   }
   selecteur_2,
   selecteur_3
   {
       propriete_1:valeur_1;
       propriete_2:valeur_2;
   }
   /* EOF
   ------------------------------------------------------------------------------*/
   

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 ?

   Généralement les plus courts possibles. Éventuellement avec un rappel du conteneur parent important.

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

   Voir le point 2.

   J’omets parfois le dernier point-virgule.

   Au passage, je ne comprends vraiment pas le choix de coder les blocs de déclarations sur une seule ligne… ça me semble vraiment impossible à relire.

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 la logique de séparation de mes grands conteneurs.

   Par défaut :

   • page
     • tête
     • corps
       • menu
       • contenu
     • pied

   Et si besoin en sections plus petites dans le contenu.

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

   Non. Je trouve cela très peu pratique malgré la lisibilité indéniable de cette technique.

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’use beaucoup des propriétés de raccourci pour :

   • margin ;
   • padding et
   • border

   Mais presque jamais pour :

   • list - je n’en ai pas l’utilité ;
   • font - par manque de pratique essentiellement ;
   • background - qui demande un travail trop important si je veux conserver la validitée (sans avertissement) de ma CSS.

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 vraiment. Je n’y trouve aucun intérêt.

   Néanmoins, je code bien souvent en premier la mise en place globale de la structure, pour affiner ensuite les enrichissements visuels.

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 ? Utilisez vous des commentaires introduisant différentes parties, une « table des matières », ou d’autres procédés ?

   Voir le point 2.

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’utilise plusieurs fichiers CSS.

    Je charge dans un premier temps :

    • YUI reset,
    • YUI base et
    • YUI font.

    Puis en fonction du projet :

    • une CSS par fonctionnalité annexe (plugin par exemple),
    • une CSS pour l’affichage général à l’écran et
    • une CSS pour l’affichage général à l’impression.

    Tout cela étant traité ensuite automatiquement afin de n’obtenir en production qu’une seule CSS (à l’aide des medias types), optimisée et nettoyée.

11. Utilisez-vous des hacks CSS ? Lesquels en particulier ?

    J’évite tant que je peux.

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

    Oui. Je procède de cette manière :

        <head>
            <!--[if IE]><link rel="stylesheet" type="text/css" media="all" title="Affichage par défaut" href="css/ie.css" /><![endif]-->
        </head>
        <!--[if gt IE 6]><body class="msie msie7"><![endif]-->
        <!--[if IE 6]><body class="msie msie6"><![endif]-->
        <!--[if lt IE 6]><body class="msie msie5"><![endif]-->
        <!--[if !IE]>--><body><!--<![endif]-->
    

    D’une part une classe sur le body donc, que j’utilise ensuite ainsi :

    .msie6 selecteur_1
    {
        propriete_1:valeur_1;
    }
    .msie selecteur_2
    {
        propriete_1:valeur_1;
    }
    

    D’autre part une CSS destinée à IE, dans laquelle je range les propriétés propriétaires à ce navigateur (zoom:1, etc.).