Formation Prestashop intégrateur: Guide CSS / Nom des classes

Vous êtes ici : Accueil / Prestashop intégrateur / Guide CSS / Nom des classes


Nom des classes

  • N'utilisez que des minuscules et des tirets dans les noms des classes (pas d'underscore ou de camelCalse). Les tirets sont des séparateurs naturels dans les classes de même contexte (e.g., .btn et .btn-danger).
  • Évitez les notations abrégées excessives et arbitraires. .btn est utile pour un button, mais .s ne veut rien dire.
  • Gardez les noms de classes aussi courts et succincts que possible.
  • Utilisez des noms qui ont du sens; préférez des noms expliquant la structure ou le but plutôt que la présentation.
  • Préfixez les classes d'après le parent le plus proche ou la classe de base.
  • Utilisez des classes .js-* pour indiquer un comportement (par opposition à un style), mais laissez ces classes en dehors de votre CSS.

Il est aussi utile d'appliquer la majorité de ces règles lorsque vous créez des noms de variable Sass.

/* Bad */
.t { ... }
.red { ... }
.header { ... }

/* Good */
.tweet { ... }
.important { ... }
.tweet-header { ... }