Standards CSS

Organisation

Les fichiers de style doivent être situés dans le répertoire pix/live/app/styles.

SaSS + Ember = ember-cli-sass

Nous utilisons SaSS pour nous aider à produire du code CSS maintenable et performant.

L'intégration de SaSS avec Ember.js se fait via l'addon ember-cli-sass.

Les fichiers de styles doivent porter l'extension .scss.

BEM

Nous respectons les conventions de nommage de la méthodologie CSS BEM.

Historiquement, le projet a été initié sans réelles conventions de nommage / structuration. Il est possible de trouver du code non-BEMifié. La bonne pratique est de BEMifier (dans la mesure du raisonnable / pragmatique) le CSS legacy.

Mobile First

Pix doit permettre le plus possible aux gens qui le souhaitent d'utiliser la plateforme depuis un terminal mobile.

Il est conseillé de privilégier une approche "mobile first", c'est-à-dire qui consiste à d'abord intégrer le design optimisé pour des terminaux mobiles, avant d'étendre / surcharger le style (via des media queries CSS) pour les autres types de support (tablettes en mode paysage ou ordinateurs).

Les points de rupture considérés (ou breakpoints) sont :

• 600px (non-inclus) pour les mobiles exclusivement
• à partir de 992px (inclus) pour les supports desktop

Exemple d'intégration de style propre à un écran desktop :

@media (min-width: 992px) {
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
}

Nesting

Nous avons convenu d'utiliser la fonctionnalité nesting de classe CSS offerte par SaSS dans 2 cas :

• les media queries
• les pseudo-classes

Exemples pour les media queries :

.feedback-panel__form {
  width: 100%;

  @media (min-width: 992px) {
    width: 50%;
  }
}

Exemple de pseudo-classes :

.result-item {
  width: auto;
  height: 80px;
  border-radius: 5px;
  border-color: $light-grey1;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;

  &:hover {
    box-shadow: none;
    border: solid 2px #446eff;
    transition: border-color 1s ease;
  }

  &:nth-last-child(1) {
    margin-bottom: 20px;
  }
}

Toute autre de forme de nesting est interdite !

Vues et composants

Le template d'une route (a.k.a. "composant [de type] vue" ou view component) ou d'un composant doit commencer par un élément <div> avec une ou plusieurs classes propres à l'objet concerné.

Cas d'une page (ou view component)

Dans le cas d'une vue, la balise classe respecte le format : "page page--<nom_de_la_page>".

Exemple de template pour la route /index :

// templates/index.hbs
<div class="page page--index">
  // contenu de la page/vue index
</div>

Autre exemple de template pour la route /projet :

// templates/project.hbs
<div class="page page--project">
  // contenu de la page/vue project
</div>

Cas d'un composant

Dans le cas d'un composant, le nom de la classe est celui du fichier.

Exemple de template pour le composant feedback-panel

// templates/components/feedback-panel.hbs
<div class="feedback-panel">
  // contenu du composant feedback-panel
</div>

Code style

Les classes doivent être nommées en kebab-case :

/* Good */
.my-class {
}

/* Wrong */
.MyClass {
}

.myClass {
}

.my_class {
}

Le nombre d'espaces de décalage est 2.

/* Good */
.my-class {
  padding: 10px;
}

/* Wrong */
.my-class {
    padding: 10px;
}

Les classes doivent être définies à la ligne.

/* Good */
.my-class {
  padding: 10px;
}

/* Wrong */
.my-class { padding: 10px; }