Country / Dev

J’ai l’impression de me répéter, mais apparemment tout le monde n’est pas encore au courant qu’il faut utiliser des noms de class sémantiquement correcte lorsque l’on fait ses CSS.

Par là je veux dire assigner à vos éléments une class qui désigne leur rôle et non pas leur apparence. Le rôle du CSS est de séparer le contenu de la présentation, si vous insérez dans votre contenu des class décrivant la présentation des éléments alors vous perdez le principal avantage des CSS !

Exemple, j’ai un message d’erreur (un texte en rouge) à afficher dans ma page, je lui met donc une classe .red :

.red { color:red; }

Ça marche, c’est génial. Tout se passe bien, jusqu’au jour où le client veut que le message s’affiche plutôt en orange ! Vous vous retrouvez alors avec :

.red { color:orange; }

La logique de votre code vient d’en prendre un coup. Vous pouvez aussi renommer en .orange toutes les class .rouge dans vos templates, quel temps perdu tout ça pour une couleur qui change… Alors qu’avec une simple class .error mon code serait resté logique et flexible malgré les éventuelles modifications futur.

Donc non, n’utilisez jamais de class qui décrivent l’apparence de vos éléments, même si vous vous dîtes que le style de votre élément ne changera jamais, vous pourriez être surpris !

Jamais ?

Ok, il peux y avoir des exceptions dans des cas précis.

En particulier si la personne qui doit manipuler ces class n’a pas un profil technique. Le cas que je rencontre régulièrement c’est le client qui veut aligner une image à droite dans une page, mettre un texte en bleu, etc. (et qui n’a pas accès à un outils WYSIWYG). Dans ce cas là vous pouvez lui définir quelques class utilitaires avec des noms assez explicite (parce que lui pensera apparence et pas rôle) pour qu’il puisse utiliser dans ses créations. Il y a sans doute d’autres cas particuliers où on pourrait être amené à utiliser ce genre de noms de class, si vous avez des exemples…