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.

Nesting

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

• les media queries
• les pseudo-classes

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>