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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



19 commentaires pour “Conventions de nommage pour les CSS — identifiants et classes — de votre site web”

  1. krysttof dit :

    On trouve aussi très régulièrement #wrap non ?

  2. briegel dit :

    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/

  3. Luc dit :

    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

  4. Skoua dit :

    Perso je trouve #header et #footer plus clairs que #branding et #siteinfo.

    • Bruno Bichet dit :

      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

    • André Farzat dit :

      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.

    • Bruno Bichet dit :

      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 !

  5. _jiann dit :

    Suis-je le seul a nommer mes id & class de maniere « differente » pour les petits annonceurs ? genre id= »goldorak » ou class= »bluegrasscountryfest »

  6. [...] Google Maps 4.5 sur Android pour vous diriger d'un lieu à un autre à pied.Conventions de nommage pour les CSS — identifiants et classes — de votre site webLe nommage des identifiants et des classes est une question à laquelle [...]

  7. Identitools dit :

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

    • André Farzat dit :

      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 )

  8. Bruno Bichet dit :

    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.

  9. charles dit :

    Est ce bien utile de d avoir #footer, #nav, #header et compagnie en html5 ?

    • Bruno Bichet dit :

      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.

  10. tetue dit :

    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.

  11. sylvain dit :

    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/

  12. Kilroy dit :

    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)
    
  13. Jiann dit :

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

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site