Ce billet est une simple traduction d’un billet d’Antonio Lupetti rédigé en 2008 mais encore tellement pertinent : CSS coding: semantic approach in naming convention . En caractères italiques gras, mes commentaires!
Les conventions de nommage en CSS c’est un sujet chaud (Pas assez chaud à mon avis car avec les Frameworks CSS, ces mêmes questions se doivent d’être soulignées…). Dans ce billet, je veux illustrer quelques bonnes pratiques pour avoir une approche sémantique plutôt qu’une approche structurale lorsque vient le temps de faire le choix des noms de nos classes CSS. L’exemple utilisé pour illustrer mon propos est un modèle typique et populaire d’une mise en page sur 3 colonnes.
À la toute fin du billet, une liste d’articles à lire sur ce même sujet et une liste de Frameworks pour faciliter votre développement CSS (Pour ma part je n’aime pas ces Frameworks car pour permettre leur flexibilité, le nom des classes est souvent très peu sémantique et l’ajout de chiffre pour numéroter les zones est très répandu… beurk…)
Approche sémantique versus l’approche structurale pour le choix des noms de classes en CSS
En général, l’approche sémantique permet de définir le nom des classes en considérant sa signification, son sens par rapport à la page, indépendamment de sa position ou autres propriétés spécifiques qui constituent l’approche structurale. Des exemples d’approche structurale sont : left-bar, red-text, small-title… (Un truc serait pour faire la différence est de ce demander s’il est possible de faire mentir le nom d’une classe simplement en changeant quelques règles CSS pour cette classe… Ainsi, une classe « bleu » peut facilement être dans le champ simplement en changeant la couleur pour rouge. Une classe « zone-gauche » peut être dans le champ si on déplace cette zone à la droite. Par contre, une classe « menu » ou « entete », c’est plus difficile à faire mentir en changeant une règle CSS).
Voyons ensemble un exemple :
… et imaginons maintenant notre modèle si on change la position des zones de notre page. Si vous utilisez une approche structurale (1), il devient préférable de changer le nom des classes dans le code car la position des zones dans l’illustration (3) inverse la gauche et la droite affichées en (1). En utilisant une approche sémantique, ce problème ne se pose pas (4) :
En d’autres mots, en utilisant une approche sémantique, il est envisageable de changer complètement la disposition des éléments d’une page sans pour autant devoir changer le nom des classes CSS.
Quelques bonnes pratiques…
Avant de commencer, j’aimerais suggérer 2 règles simples pour développer du code CSS clair :
1. Utilisez les minuscules pour nommer vos classes et utilisez le « - » ou une lettre majuscule pour les noms de classe de plusieurs mots (ex. « main-content« , ou « mainContent).
2. Optimisez le code CSS en ajoutant une classe seulement sur l’élément principal et en utilisant les balises standards HTML pour les sous éléments (h1, h2, p, ul, li, blockquote,…). Par exemple, n’utilisez pas cette approche :
<div class=’
main‘>
<div class=’
main-title‘>…</div>
<div class=’
main-paragraph‘>…</div>
</div>
…utilisez plutôt ceci :
<div class=’main’>
</div>
Exemple d’une approche sémantique pour une mise en page sur 3 colonnes
Regardons un exemple simplifié qui illustre comment utiliser une approche sémantique pour une mise en page sur 3 colonnes :
Le CSS d’une telle approche pourrait ressembler à ceci :
#container{…}
/*—- Top section —-*/
#header{…}
#navbar{…}
/*—- Main —-*/
#menu{…}
#main{…}
#sidebar{…}
/*—- Footer —-*/
#footer{…}
1. Container
« #container » est la section qui contient tous les éléments de votre page et permet de contrôler la disposition du contenu dans l’espace disponible dans la fenêtre du navigateur. Pour cette section, les noms suivants pourraient également être de bons choix : « wrapper« , « wrap« , « page« .
2. Header
« #header » c’est l’entête de votre page Web. En général, l’entête inclut le logo du site et quelques éléments supplémentaires. Pour cette section, les noms suivants pourraient également être utilisés : « top » (J’aime pas), « logo » (Pas bon si ça contient plus que le logo), « page-header » (ou pageHeader).
3. Navbar
« #navbar » représente la barre de navigation horizontale (Pas nécessairement horizontale par contre…) standard. Pour cette section, les noms suivants auraient également pu être utilisés : « nav », « navigation », « nav-wrapper ».
4. Menu
« #menu » contient des liens et menu. Pour cette section, les noms suivants pourraient être utilisés : « sub-nav « , « links« . (En fait, pour ma part, je trouve que #navbar c’est souvent assez… une liste de lien sous #navbar c’est nécessairement le menu et si on est tenté de mettre autre chose dans le #navbar, c’est que le nom #navbar est alors mal choisi…)
5. Main
« #main » est la section principale d’une page du site. S’il s’agit d’un blogue, c’est la section qui contiendra vos articles. Pour cette section, les noms suivants pourraient être utilisés : « content« , « main-content » (or « mainContent »),
6. Sidebar
« #sidebar » contient du contenu d’ordre secondaire comme une liste de liens vers les derniers articles, un court texte descriptif à propos du site, de la publicité… Les noms suivants pourraient être pertinents : « sub-nav« , « side-panel« , « secondary-content« .
7. Footer
« #footer » contient généralement des informations supplémentaires à propos du site Web. Un autre nom pourrait être « copyright » (Je ne sais pas pour vous, mais plus souvent qu’autrement, mes footers ont plus que le copyright…).
Si vous avez des suggestions de noms sémantiques de classes, n’hésitez pas à laisser un commentaire.
J’ai pris la peine de traduire ce billet car il est important de se conscientiser sur le nom des classes que nous utilisons pour nos CSS. De bons noms assurent la pérennité de notre code, donc par le fait même sa valeur. Tout n’est pas à mon goût dans les propositions mais il ne faut pas non plus virer fou avec le concept…
