Home

Awesome

Airbnb CSS / Sass Styleguide

Une approche raisonnable de CSS et Sass

Table des matières

  1. Terminologie
  2. CSS
  3. Sass
  4. Traductions

Terminologie

Bloc de déclaration

Un « bloc de déclaration » est le nom donné à un sélecteur (ou un groupe de sélecteurs) accompagné d'un groupe de propriétés. Un exemple ici :

.listing {
  font-size: 18px;
  line-height: 1.2;
}

Sélecteurs

Dans un bloc de déclaration, les « sélecteurs » sont les parties qui déterminent quels éléments dans l'arborescence DOM seront stylés par les propriétés définies. Les sélecteurs peuvent correspondre à des éléments HTML, ainsi que la classe d'un élément, son ID ou l'un de ses attributs. Ci-après, quelques exemples de sélecteurs :

.my-element-class {
  /* ... */
}

[aria-hidden] {
  /* ... */
}

Propriétés

Enfin, les propriétés sont ce qui donne leur style aux éléments sélectionnés d'un bloc de déclaration. Les propriétés vont de paires avec leur valeur respective, et un bloc de déclaration peut contenir une ou plusieurs propriétés. Les propriétés ressemblent à ceci :

/* some selector */ {
  background: #f1f1f1;
  color: #333;
}

⬆ Retour en haut

CSS

Mise en forme

Mauvais

.avatar{
    border-radius:50%;
    border:2px solid white; }
.no, .nope, .not_good {
    // ...
}
#lol-no {
  // ...
}

Bon

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
  // ...
}

Commentaires

OOCSS et BEM

Nous encourageons la combinaison d'OOCSS et de BEM pour ces raisons :

OOCSS, ou « Object Oriented CSS », est une approche d'écriture du CSS qui vous encourage à penser à votre feuille de style en tant que collection d'« objets » : du code réutilisable et répétitif qui peut être utilisé de manière autonome sur un site Web.

BEM, ou « Block-Element-Modifier », est une convention de nommage pour les classes en HTML et CSS. Il a été développé à l'origine par Yandex avec une grande base de code et une évolutivité à l'esprit, et peut servir de lignes directrices pour la mise en œuvre d'OOCSS.

Nous recommandons une variante de BEM avec des « blocs » en PascalCase, qui fonctionne particulièrement bien quand ils sont combinés avec des composants (par exemple, React). Les underscores and tirets sont toujours utilisés pour les modificateurs et les descendants.

Exemple

// ListingCard.jsx
function ListingCard() {
  return (
    <article class="ListingCard ListingCard--featured">

      <h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>

      <div class="ListingCard__content">
        <p>Vestibulum id ligula porta felis euismod semper.</p>
      </div>

    </article>
  );
}

/* ListingCard.css */
.ListingCard { }
.ListingCard--featured { }
.ListingCard__title { }
.ListingCard__content { }

Sélecteurs d'ID

Alors qu'il est possible de sélectionner un élément par son ID en CSS, il devrait généralement être considéré comme un « anti-pattern ». Les sélecteurs d'ID introduisent un niveau inutilement élevé de spécificité à vos blocs de déclaration, et ne sont pas réutilisables.

Pour plus d'information sur ce sujet, lisez CSS Wizardry's article sur la spécificité.

JavaScript hooks

Évitez de lier la même classe dans votre CSS et votre JavaScript. La combinaison des deux entraîne souvent, au minimum, un temps perdu lors du refactorisation lorsqu'un développeur doit faire une référence croisée sur chaque classe, et dans le pire des cas, les développeurs auront peur de faire des changements en cassant des fonctionnalités.

Nous vous recommandons de créer des classes spécifiques à JavaScript, préfixées avec .js- :

<button class="btn btn-primary js-request-to-book">Request to Book</button>

Bordure

Utiliser 0 à la place de none pour spécifier qu'un style n'a pas de bordure.

Mauvais

.foo {
  border: none;
}

Bon

.foo {
  border: 0;
}

⬆ Retour en haut

Sass

Syntaxe

Ordre des propriétés

  1. Déclaration de propriétés

    Lister toutes les propriétés standard, tout ce qui n'est pas un @include ou un sélecteur imbriqué.

    .btn-green {
  background: green;
  font-weight: bold;
  // ...
}

  2. Déclarations @include

    Grouper les @include à la fin rend la lecture du sélecteur en entier plus facile.

    .btn-green {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);
  // ...
}

  3. Sélecteurs imbriqués

    Les sélecteurs imbriqués, si nécessaire, sont en dernier, et rien ne va après. Ajoutez un espace entre vos blocs de déclaration et sélecteurs imbriqués, ainsi qu'entre les sélecteurs imbriqués adjacents. Appliquez les mêmes directives que ci-dessus à vos sélecteurs imbriqués.

    .btn {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);

  .icon {
    margin-right: 10px;
  }
}

Variables

Préférez les noms de variables avec un tiret (par exemple $my-variable) plutôt que d'utiliser du camelCase ou snake_case. Il est acceptable de préfixer les noms de variables qui sont destinés à être utilisées uniquement dans le même fichier avec un trait de soulignement (par exemple $_my-variable).

Mixins

Les mixins devrait être utilisé pour simplifier votre code (méthode « DRY »), ajouter de la clareté, ou abstraire de la complexité--de la même manière que les fonctions bien nommées. Les mixins qui n'acceptent pas d'argument peuvent être utile pour ça, mais notez que si vous ne compressez rien (par exemple Gzip), cela peut contribuer à la duplication de code inutile dans les feuilles de styles.

Directive Extend

@extend doit être évité parce qu'il a un comportement non intuitif et potentiellement dangereux, surtout lorsqu'il est utilisé avec des sélecteurs imbriqués. Même étendre les sélecteurs de niveau supérieur peut causer des problèmes si l'ordre des sélecteurs change ultérieurement (par exemple, s'ils sont dans un autre fichier et que l'ordre d'appel de ce fichier à changé). Utiliser Gzip devrait gérer la plupart des économies que vous auriez gagnées avec @extend, et vous pouvez utiliser méthode « DRY » pour mieux alléger vos feuilles de styles à l'aide de mixins.

Sélecteurs imbriqués

Ne pas imbriquer les sélecteurs à plus de 3 niveaux de profondeur !

.page-container {
  .content {
    .profile {
      // STOP!
    }
  }
}

Lorsque les sélecteurs deviennent longs, vous écrivez probablement du CSS qui est :

A nouveau : ne jamais imbriquer des sélecteurs d'ID !

Si vous devez utiliser un sélecteur d'ID en premier lieu (et vous ne devriez vraiment pas essayer), ils ne doivent pas être imbriqués. Si vous vous apercevez que vous le faites, vous devez revoir votre markup, ou trouver pourquoi une telle spécificité est nécessaire. Si vous écrivez du HTML et du CSS bien formattés, vous ne devriez jamais avoir besoin de le faire.

⬆ Retour en haut

Traductions

Ce guide de style est aussi disponible dans d'autres langues :

⬆ Retour en haut