Css 3.0

Bonne pratiques des nommages en css

Dans le projet NextDom nous sommes confronté à la refonte du style. Beaucoup de style est directement présent dans le HTML. Il fallait repartit sur de bonnes bases si nous voulions assurer la pérennité de notre développement.
En premier 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 digeste

la sortie du style du HTML est un gros morceau que mes collègues ont commencés 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 fait 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 fait 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 ...

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, elle perdent la sémantique de l’information qui leur est présentée.

.span_colorblue, .pre_code-php ...

Dans le cas vu ci-dessus on mélange la sémantique de la balise et le style qu’on veux 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

A la lecture de la norme su le document de référence du W3C on se rende compte que les attributs id et classes sont « case-insensitive », les seules séparateurs autorisés son 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 viennes à 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éelle elles sont destinées. La classe « normal » n’a pas de signification. Qu’est-ce qui est normal ?

Selon moi, voici ce qu’il aurai 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’une entête qui contiens des titre 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’attend vos retours pour agrémenter cet article…

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.