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.
On trouve aussi très régulièrement #wrap non ?
Dans les longues soirées d’hiver, seul devant un écran navrant, il est aussi possible de faire naître la poésie et l’humour dans le nommage.
L’un des meilleurs exemples pour moi reste http://www.desirsdefail.fr/
sans oublier les classes servant a faire quelques choses de particulier
.clear => pour casser les floats
.invisible => pour masquer des éléments sans utiliser de display:none;
.align_center
.align_right
.align_left
=> pour gérer les alignements
et certaines plus système.
.error
.advice
=> pour les messages d’erreurs
Perso je trouve #header et #footer plus clairs que #branding et #siteinfo.
Oui, bien sûr. D’ailleurs l’un n’empêche pas l’autre : on peut très bien avoir un #header avec un #branding et #autre #chose dedans 😉 Idem pour le #footer avec #siteinfo
je suis d’accord.
Et #nav/#navegation pour le menu principal et, en cas d’avoir, #menu/#submenu pour les menus spécifique de chaque session/page.
J’allais oublier la raison principale qui explique la présence d’un #branding plutôt qu’un #header : branding est plus signifiant que header qui a en plus une connotation de positionnement comme #publicite-en-haut-a-droite !
Suis-je le seul a nommer mes id & class de maniere « differente » pour les petits annonceurs ?
genre id= »goldorak » ou class= »bluegrasscountryfest »
Intéressant, mais sans vouloir jouer la mauvaise langue, le français aussi c’est bien.
Pourquoi se buter à utiliser l’anglais alors que justement l’identifiant ou la classe est nommée comme on le souhaite ?
conteneur
contenu
article
menu
etc…
Étrangement j’ai tout de même une préférence pour « footer » (parce que… « pied », ahem.)
Pour convention. C’est plus facile pour partager quand tout est normalisé. Et le standard est anglais.
Je suis brésilien et ici dans mon travail nous utilisons tous les noms en anglais. ( Principalement parce que français e portugais ont beaucoup de accents )
Identitools — J’ai une aversion incontrôlable pour les noms de domaine sans accent qui devraient en avoir un. C’est pareil pour le choix de mes identifiants ou classes. Et puis l’anglais est globalement plus concis, ce qui n’est pas plus mal.
Est ce bien utile de d avoir #footer, #nav, #header et compagnie en html5 ?
Pour les identifiants #header et #footer cf. mon commentaire plus haut (http://css4design.com/conventions-nommage-classe-css-id#comment-5521). Ensuite pour la navigation, on pourra utiliser nav {propriete: valeur} si l’on a qu’une navigation, ou bien #nav-main {…} #nav-section{} etc. Le fait que le terme « nav » soit redondant entre le nom de la balise et le début de l’identifiant n’est pas un problème et permet même de rendre la feuille de style plus claire.
Le fait que l’on peut avoir autant de « header » ou de « footer » que l’on a de « section » (implicites ou non) milite en faveur d’une convention de nommage solide.
J’utilise actuellement : .header .logo .slogan .navigation .nav-(whatever) .content .context .footer et je réserve les identifiants aux ancres et aux éléments uniques.
2 choses :
– je pense qu’il serait interessant d’utiliser le nom des futures balises html5, par exemple -> #header
– les microformats sont également une bonne référence : http://www.elanceur.org/microformats/
Un exemple des nommages que j’utilise « d’instinct », c’est à dire sans avoir eu une réflexion préalable ou un input extérieur :
#global
#pageheader
#logo
#banner
#globalnav (mais nav-global est mieux)
#center
#left-sidebar
#localnav (même remarque que ci dessus)
#right-sidebar
#utilities
#search
#main
#breadcrumbs
#summary
#maintext
#footer
#copyright
#footernav
Quelques remarques :
pageheader et footer me semblent effectivement plus appropriés
je réserve header à la zone « head » (donc pas de zone nommée comme cela)
ces découpes correspondent aux blocs dans mon CMS préféré (MODx)
pour la navigation, le préfix nav me semble adapté. On peut lui accoler un terme par type de nav (global, local, contextual, footer)
ARGH.
les sauts de ligne ne sont pas passés dans mes élucubrations. J’espère que c’est quand même lisible.
Journée confession : si je suis le seul intervenant sur le projet, tous mes éléments ont des noms farfelus (ayant un thème commun).
Si je choisis un thème animal, on aura des trucs comme #cheval .mouton #salamandre etc …
L’idée étant juste d’avoir le sourrire en travaillant.
S’il n’y a pas réellement d’avantages, ça regroupe tous les inconvénients, ce qui peut être un avantage au final 🙂