Conventions de nommage CSS

Problèmes fréquemment rencontrés en CSS

Écrire du CSS est relativement facile mais garder le code fonctionnel et propre sur le long terme est beaucoup plus difficile - d’ajout en ajout, le code devient de moins en moins compréhensible.

  1. CSS difficile à comprendre
    Prenons le code suivant:

     <div class="box profile pro-user">
   <img class="avatar image" />
   <p class="bio">...</p>
 </div>

    Il est impossible de savoir si les classes box et profile sont liées, s’il est possible d’utiliser avatar en dehors de profile, si la classe pro-user est utilisée ailleurs qu’ici, etc.

  2. CSS difficilement réutilisable
    Supposons qu’il existe un style sur une page que vous souhaitez réutiliser sur une autre page, mais lorsque vous l’essayez, vous découvrez que le code a été écrit d’une manière qui ne fonctionne que sur la première page. L’auteur a supposé que l’élément serait placé dans un parent particulier, et cela ne fonctionne pas dans un autre contexte. Vous dupliquez donc le code.

  3. CSS difficile à surcharger
    Vous voulez mettre à jour le style d’un élément sur une page en particulier et il rompt sur une autre. Vous essayez de modifier le style sur l’autre page, mais vous vous retrouvez pris dans une guerre de spécificité.

C’est pour éviter ces problèmes qu’il existe des guidelines pour structurer le CSS.

CSS modulaire

Il existe différentes conventions, les trois principales sont OCCSS, BEM et SMACSS.
Toutes s’articulent autour d’une idée de base: écrire le CSS de manière modulaire.

On a tendance à penser à une page avec une approche top-down: un bandeau haut, une barre de navigation verticale, une liste d’articles, etc. Le problème est que cela conduit à écrire du code qui n’est pas réutilisable.

Le principe du CSS modulaire est de prendre du recul et de décomposer la page en morceaux de blocs discrets: un logo, une barre de recherche, des onglets, une liste de photos, un lecteur vidéo, etc. Ces éléments peuvent être utilisés sur différentes pages à différents endroits. Il se trouve juste qu’ils sont assemblés de cette manière sur cette page mais qu’ils pourraient être disposés autrement sur une autre page.

Écrire du CSS de manière modulaire requiert de réfléchir avec une approche bottom-up: on commence avec des blocs réutilisables puis on les dispose, un peu comme des legos.

OOCSS

OOCSS, pour Object-Oriented CSS, a été créé en 2009 par Nicole Sullivan suite à son travail chez Yahoo. C’est le point d’origine du CSS modulaire.

Exemple OOCSS:

<div class="media">
  <a href="#" class="img">
    <img src="" alt="" />
  </a> 
  <div class="bd"></div>
</div>

.media {} 
.media .img {} 
.media .img img {} 
.media .imgExt {} 
.bd {}

BEM

BEM, pour Block, Element, Modifier, a été en 2009 à Yandex (moteur de recherche et serveur email Russe).

Le concept de base est le suivant:

BEM définit la convention de nommage suivante:

.block-name__element--modifier

Par exemple:

<button class="btn btn--big btn--orange">
  <span class="btn__price">$9.99</span>
  <span class="btn__text">Subscribe</span>
</button>

Notez que cette recommendation à changé en 2017: le double-tiret est remplacé par un simple underscore, et ce, pour pouvoir écrire des noms de classe dans les commentaires HTML — qui n’autorisent pas l’usage des doubles-tirets.

.block-name__element_modifier

Release 2.3.1 - May 25, 2017
BEM Naming Change
Initially we used the double dash style for BEM notation (–). Due to the fact that double dashes are problematic in an XML environment (which doesn’t allow double dashes within comments), we have upgraded our syntax to use the single underscore style (_). This change is backward compatible for 18 months. But all components going forward are built with the single underscore BEM style.

Les guidelines données par BEM sont les suivantes:

Exemple BEM:

<div class="media media--inverted">
  <a href="#" class="media__image-wrapper">
    <img class="media__image" src="" alt="" />
  </a>
  <div class="media__content"></div>
</div>

.media {}
.media--inverted {}
.media__image-wrapper {}
.media__image {}
.media__content {}

Équivalent en SCSS:

.media {
  &--inverter {}
  &__image-wrapper {}
  &__image {}
  &__content {}
}

Voir aussi: Official BEM Methodology Quick Start

SMACSS

SMACSS, pour Scalable & Modular Architecture for CSS, a été crée en 2011 par Jonathan Snook suite à son travail chez Yahoo Mail. SMACSS ajoute le concept de catégories de composants. Il existe 5 catégories:

En conclusion

Toutes ces conventions de nommage sont différentes mais similaires.
De manière générale, on distingue 3 types d’items

Les styles des éléments peuvent être organisés en différentes catégories:

Les principales conventions à respecter sont

Source: What is Modular CSS?

Variables CSS

De la même manière que les sélecteurs CSS, vos variables CSS (natives ou celles de préprocesseurs comme Sass ou Less) devraient être sémantiques et faciles à comprendre. Il n’existe pas de préconisation sur le sujet mais pour rendre vos variables facilement compréhensible, vous pouvez suivre le format suivant:

type-importance

Couleur

En gardant ces éléments en têtes, on peut constituer une liste de noms de variables de couleur facilement compréhensibles:

/* couleur de base, avec une teinte et une nuance
   - typiquement utilisé pour la couleur fond du site et la typographie */
$clr-base:    #666;
$clr-base-lt: #999;
$clr-base-dk: #333;

/* couleur dominante - skyblue
   - avec des teintes et nuances via des fonctions Sass */
$clr-primary:     skyblue;
$clr-primary-lt:  lighten($clr-primary, 5%);
$clr-primary-ltr: lighten($clr-primary, 10%);
$clr-primary-dk:  darken($clr-primary, 5%);
$clr-primary-dkr: darken($clr-primary, 10%);

/* couleur secondaire - hotpink
   - avec des teintes et nuances via des fonctions Sass */
$clr-secondary:     hotpink;
$clr-secondary-lt:  lighten($clr-secondary, 5%);
$clr-secondary-ltr: lighten($clr-secondary, 10%);
$clr-secondary-dk:  darken($clr-secondary, 5%);
$clr-secondary-dkr: darken($clr-secondary, 10%);

/* couleurs neutres */
$clr-ntrl-min: #fff;
$clr-ntrl-max: #000;

  1. Toutes les variables de couleur sont préfixées de clr-.

  2. Les couleurs de la marque sont ordonnées par ordre d’importance: primary, secondary, tertiary, quaternary, etc.

  3. Les teintes et nuances sont indiquées en suffixe du nom de la couleur dont elles dérivent:
    • lt pour light,
    • ltr por lighter,
    • ltst pour lightest, etc.
  4. Vous pouvez également ajouter des couleurs telles que $clr-success, $clr-warning, etc, en ajoutant les teintes et nuances de ces couleurs toujours sur le même schéma.

Taille de police

Toutes les variables de taille de police sont préfixées de fs- (pour font-size) puis sont ordonnées de grandes tailles (pour le logo par exemple) à petites tailles (pour les éléments sub par exemple).

/* taille de base - appliqué au contenu de la page */
$fs-base: 16px;

/* tailles plus grandes que les éléments de heading */
$fs-giga: 80px;
$fs-mega: 70px;
$fs-kilo: 60px;

/* tailles des éléments de heading */
$fs-h1: 36px;
$fs-h2: 32px;
$fs-h3: 28px;
$fs-h4: 24px;
$fs-h5: 20px;
$fs-h6: 18px;

/* tailles plus petites que le corps de texte */
$fs-milli: 14px;
$fs-micro: 10px;
$fs-nano:  8px;

Famille de police

Toutes les variables de famille de police sont préfixées de ff- (pour font-family) puis sont ordonnées par ordre de prépondérance: contenu, titre, sous-titre, icone.

$ff-base:      'Helvetica Neue', Helvetica, Arial, sans-serif;
$ff-alt-alpha: 'Open Sans', sans-serif;
$ff-alt-beta:  'Roboto', sans-serif;
$ff-icon:      'My Icon Font';

Source: Make Your CSS Variable Names Suck Less

Material Design pour Android

This site is open source. Improve this page.