Oct
2

Nommez vos classes et ID de façon évolutive en CSS

Lorsque vous mettez en place la présentation de votre site web vous ne savez pas forcément quel nom donner aux différents blocs que vous allez mettre en place.

Ce que l’on fait naturellement

Le premier réflexe est donc de créer une structure comme suit :

#top-div
#left-column

#right-column

#cadre-bleu

Vous avez nommé vos blocs en fonction de la position (en haut, à droite, etc…) que vous leur avez attribué ainsi qu’à leur forme  (couleur, italique, pointillé, etc…) dans votre layout.

C’est ce qu’on appelle une structure de présentation.

Quels problèmes celà pose ?

1. Imaginons que le bloc #left-column serve de menu et que pour une raison ou une autre vous vouliez modifier votre template.

Vous souhaitez mettre votre menu à droite plutôt qu’à gauche. Votre bloc qui s’appelle #left-column va donc, désormais, se retrouver à droite. N’est-ce pas un peu idiot ?

Du coup, pour rendre les choses rationnelles vous décidez de renommer le bloc dans toutes vos pages avec le risque important d’erreurs que ça occasionne.

2. Maintenant considérons que le cadre bleu est une note pour attirer l’attention du lecteur sur un point précis.

Vous n’avez plus le temps de vous occuper de votre site web donc vous le sous-traitez à quelqu’un d’autre.

Cette personne va ouvrir votre page et voir ce bloc appelé #cadre-bleu.

Il va se demander : « pourquoi y’a-t-il une classe #cadre-bleu ? », « quelle est son utilité dans la page ? ».

Si il change la couleur du cadre, va-t-il pouvoir retrouver tout les cadres bleus que vous aurez utilisé comme note sur les autres pages ?

De plus s’il décide de mettre le cadre en rouge on aura un bloc #cadre-bleu avec une bordure rouge.

Une personne extérieure devra donc faire beaucoup d’efforts pour relire votre code et l’adapter.

 

Vous voyez donc que la structure de présentation atteint vite des limites.

Pour éviter ce genre de problèmes, adoptez une convention de nommage structurelle c’est à dire que les noms des blocs ne sont plus attribués en fonction de la présentation mais en fonction de leur utilité.

Reprenons l’exemple précédent en utilisant une convention structurelle :

 

#banner
#menu

#content

#note

Maintenant, que vous mettiez votre menu en haut, en bas, – à gauche,à droite; ces soirées là (ah ah ah ah) on drague on branche; toi-même tu sais pourquoi (© Cloclo) – il n’y a plus besoin de renommer le bloc. Par ailleurs, on comprend dès la première lecture ce que le bloc contient.

Articles similaires :

  • Pas d'articles similaires

1 Comment to “Nommez vos classes et ID de façon évolutive en CSS”

  • fred 9 novembre 2012 à 12 h 06 min

    Très bonne méthode, à toujours appliquer.