Conventions de nommage pour les CSS — identifiants et classes — de votre site web

Le nommage des identifiants et des classes est une question à laquelle l’intégrateur web est confronté chaque fois qu’il démarre un projet. Dans l’idéal il faut trouver des intitulés d’identifiants et de classes reflétant la signification des contenus qu’ils enveloppent. A cet égard, #publicite-principale est plus judicieux que #publicite-en-haut-a-droite dans la mesure où l’emplacement de la publicité — fut-elle principale — peut être placée à différentes endroits stratégiques. Pour nous aider à y voir plus clair, Andy Clarke (revisitant Eric Meyer) a eu la  bonne idée de partager ses réflexions sur le sujet (dès 2004) sous la forme d’une proposition de convention de nommage pour les identifiants et les classes susceptibles de faire partie de la majorité des projets web.

Eléments communs

#container
Bloc pour l’ensemble de la page (généralement une balise `div`).
#branding
En-tête, bannière ou marque du site.
#branding-logo
Logo du site.
#branding-tagline
Accroche, slogan, sous-titre définissant le but du site.
#nav or #navigation
Contient les éléments pour la navigation dans le site.
#nav-main
Navigation principale.
#nav-section
Navigation vers les pages appartenant à la section en cours.
#nav-external
Navigation vers des pages externes au site.
#nav-supplementary or #nav-supp
Liste de liens supplémentaires (ex. dans le pied de page).
#nav-(whatever)
Listes de liens à nommer en fonction des besoins.
#search
Contient les outils de recherche et l’affichage des résultats.
#search-input
Formulaire de recherche.
#search-output
Résultat de la recherche, dans une balise `div` ou dans une liste de définition `dl`.
#content
Zone de contenus ayant un autre but que la navigation.
#content-main
Zone de contenu principal.
#content-news
Contenu de type « News ».
#content-(whatever)
Tout autre type de contenu, incluant #content-related, #content-quote, etc.
#siteinfo
Regroupe toute sorte d’information relatives au site.
#siteinfo-legal
Informations de copyright.
#siteinfo-credits
Crédits divers.

Eléments spécifiques au e-commerce

#content-products
Zone globale accueillant des produits.
.products
Produit individuel.
.products-prices
Prix, rabais, offres spéciales, etc.
.products-description
Résumé ou description détaillée d’un produit.
.products-review
Avis de consommateur.
.products-(whatever)
Tout type de contenu lié au produit.