Bonne pratiques des nommages en css

Dans le projet NextDom, nous sommes confrontés à la refonte du style. Beaucoup de style est directement présent dans le HTML. Il fallait repartir sur de bonnes bases si nous voulions assurer la pérennité de notre développement.
En premiers lieux, nous avons décidé d’utiliser SASS. On y gagne :

• les variables,
• la vérification de syntaxe,
• une meilleure lisibilité,
• la possibilité d’utiliser la syntaxe CSS et de la transformer petit à petit en SCSS,
• la possibilité de découper facilement d’énormes feuilles de styles en de plus petits fichiers plus digestes

la sortie du style du HTML est un gros morceau que mes collègues ont commencé et ce n’est pas simple. Très vite est apparu le besoin de créer de nouvelles classes et surtout de les nommer correctement.

C’est un point très compliqué en informatique, savoir nommer les choses et ce n’est pas que moi qui le dit :

There are only two hard things in Computer Science: cache invalidation and naming things.

– Phil Karlton

Lorsque je fais une intégration, j’essaie de concilier deux choses vraiment pas évidentes. Je veux rendre le plus abstrait possible le nom de mes classes et en même temps, il faut ce même nom soit le plus compréhensible possible. Sachant que je ne suis pas un spécialiste du frontend et que j’en fais que quand je suis vraiment obligé…

Des exemples de ce qu’il ne faut pas faire

Mon expérience m’a fait rencontrer des choses étranges  :

.h1, .h2, .h3 ... ⁣/pre>
Vouloir créer des classes pour faire passer une balise pour ce qu'elle n'est pas n'est pas une bonne pratique. C'est comme si on mettait une étiquette girafe à un éléphant, un éléphant reste un éléphant. Pour l'accessibilité des personnes défaillantes visuelles ou autre, elles perdent la sémantique de l’information qui leur est présentée.

.span_colorblue, .pre_code-php ... ⁣/pre>
Dans le cas vu ci-dessus, on mélange la sémantique de la balise et le style qu'on veut lui appliquer. Par ailleurs, "span_colorblue" ne donne pas d'information sur l'utilité réelle de cette classe si ce n'est que le texte est en bleu. Pourquoi n'aurait-on pas besoin d'une couleur bleu ailleurs qu'avec un span ?

.toto > div > p > img {
    width: 500px;
}

Il faut aussi faire attention de ne pas trop lier l’imbrication des balises avec la feuille de style. Un seul sous niveau est un maximum. Au-delà, l’imbrication est trop forte et le moindre changement est trop long à répercuter.  Si vous voulez atteindre les images, mettez une classe à « img » et le problème est réglé.

CammelCase ou snake-case ?

À la lecture de la norme sur le document de référence du W3C on se rend compte que les attributs id et classes sont « case-insensitive », les seuls séparateurs autorisés sont le « – « et le « _ ».

https://www.w3.org/TR/CSS21/syndata.html#characters

All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes « id » and « class », of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.

La symbolique

la première question à se poser est : « Qu’est-ce que je veux représenter et dans quel contexte« . Si on répond à ces deux questions, on a rapidement des noms qui nous viens à l’esprit.

Regardons le code HTML suivant :

<div class="background-blue">
    <h1 class="strong">Un super titre</h1>
    <h2>Un super sous-titre</h2>
</div>
<div class="normal">    
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ratione vero ad repellat ea. Sint, est, eligendi expedita ducimus magnam quae voluptate! 
        Amet possimus error sapiente consectetur dolore qui illo?    
    </p>
</div>

Les classes « background-blue », « strong » et « normal » sont instanciées. Le problème, vous l’aurez compris, est qu’elles n’indiquent pas pour quel usage réel, elles sont destinées. La classe « normal » n’a pas de signification. Qu’est-ce qui est normal ?

Selon moi, voici ce qu’il aurait fallu faire.

<div class="head">
    <h1 class="head-title">Un super titre</h1>
    <h2>Un super sous-titre</h2>
</div>
<div class="content">    
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ratione vero ad repellat ea. Sint, est, eligendi expedita ducimus magnam quae voluptate! 
        Amet possimus error sapiente consectetur dolore qui illo?    
    </p>
</div>

J’ai choisi l’anglais pour nommer mes classes, c’est un choix qui n’engage que moi. Regardons attentivement la première div, la classe « head » indique que nous sommes dans le contexte d’un entête qui contient des titres et sous-titre. On a le schéma suivant A contient A-B, etc.

Dans la div suivante, « normal » a été remplacé par « content » car c’est l’objet de cette div de contenir un texte.
J’attends vos retours pour agrémenter cet article…