Les développeurs Web (c'est-à-dire vous) peuvent créer des classes CSS et des noms d'identifiant et utiliser ces noms pour identifier les Div et autres éléments et balises de page. Pour les développeurs, lorsqu'ils nomment des sélecteurs CSS qui redéfinissent les balises XHTML (tags), ils doivent s'assurer qu'ils correspondent exactement aux balises prédéfinies, mais en ce qui concerne les noms de sélecteur de classe et d'identifiant, c'est une question d'opinion. Cependant, ce n’est pas une bonne habitude de nommer ces classes et identifiants comme vous le souhaitez.
Après avoir lu une série d'articles sur les classes CSS et les conventions de dénomination des identifiants écrits par Andy Clarke (de Stuff and Nonsense et All That Malarkey) et Eric Meyer, j'ai commencé à réfléchir à l'utilisation des classes et des identifiants dans mon propre processus de conception de sites Web. Méthode de dénomination.
Dénomination intuitive
Lors de la conception d'une page Web et devant identifier un Div, l'idée la plus naturelle est de nommer l'élément en utilisant des mots qui décrivent son emplacement sur la page. Cette approche fait ressembler les noms de classe et d'identifiant à ceci :
panneau supérieur
navigation horizontale
côté gauche
colonne centrale
col droit
Ce sont des manières valables de nommer les classes et identifiants CSS et XHTML. Ces termes sont simples et descriptifs, répondant ainsi au besoin d'identifier les éléments de la page et leurs styles CSS correspondants.
Le problème est qu'un tel nom est associé à une expression spécifique du contenu de la page. Ces noms font référence à la position des éléments de page dans une mise en page spécifique, leur utilisation en dehors d'une telle mise en page serait donc inappropriée, voire prête à confusion. Dans le même temps, ces noms n’impliquent pas la structure du contenu du document. Par conséquent, voici une meilleure façon de nommer les classes et les identifiants CSS.
Dénomination structurée
Le balisage structuré signifie une séparation complète des informations d'expression/emplacement du contenu - cela inclut les noms de classe et d'identifiant apparaissant dans le balisage.
Les informations associées balisées sont utilisées pour décrire la structure du document plutôt que son apparence. Cette fonctionnalité nous permet de réutiliser le contenu et le balisage dans différents formats d'apparence en changeant simplement le CSS. Lorsque vous comprenez cette méthode, il est facile de constater que l'utilisation de la position de la page pour nommer les classes et les identifiants est très inappropriée lorsqu'il s'agit de formats d'apparence tels que l'audio. Par conséquent, les classes et les identifiants doivent être structurés et nommés en fonction de leur objectif dans le document plutôt que de l'endroit où ils apparaissent.
Les classes et les noms d'identifiant peuvent être nommés de manière structurée comme indiqué ci-dessous :
image de marque
navigation principale
sous-navigation
contenu principal
barre latérale
Ces noms sont aussi faciles à comprendre que les conventions de dénomination intuitives, mais ils décrivent le rôle de l'élément de page plutôt que son emplacement. Cela rend le code plus cohérent avec l'intention initiale d'utiliser un balisage structurel pur, c'est-à-dire que les développeurs peuvent gérer les formats d'affichage dans divers médias sans modifier le balisage.
Même si vous n'envisagez pas de formater vos pages Web sur d'autres supports, l'utilisation de noms structurés peut vous aider à faciliter les futures mises à niveau ou refontes de votre site. Par exemple, la dénomination structurée évite toute confusion lorsqu'un div avec le même identifiant dans la colonne de droite est déplacé vers le côté gauche de la page. Nommer la barre latérale div de cette façon est plus approprié car quel que soit le côté de la page sur lequel elle apparaît, le nom reste intuitif et facile à comprendre pour les développeurs.
quelques conventions de dénomination
Andy Clarke a analysé le code source de 40 sites Web conçus par des développeurs prônant des concepts de conception Web standardisés. Bien que les noms de classe et d'identifiant soient très incohérents, certains noms communs qui apparaissent fréquemment sont toujours trouvés. Un exemple de liste des noms de classe/identifiant les plus couramment utilisés est donné ici :
en-tête
contenu
navigation
barre latérale
pied de page
Ces noms de classe et d'identification courants marquent-ils la naissance d'une norme ou la formation d'une convention généralement acceptée ? Même si c'est ce que j'espère, je ne le pense pas. J'aimerais vraiment voir un ensemble de normes de dénomination pour les éléments de page courants que nous voyons tous les jours. Dans le même temps, l'utilisation d'une méthode de dénomination standardisée peut faciliter la recherche d'éléments de page et la mise à niveau du site Web, en particulier lorsque vous devez basculer entre des sites développés par différents développeurs à des moments différents.