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.

<div class="feedback-panel__view feedback-panel__view--form">
  <h3 class="feedback-panel__form-title">Signaler un problème</h3>

  <div class="feedback-panel__form-description">
    <p>PIX est à l’écoute de vos remarques pour améliorer les épreuves proposées #personnenestparfait.</p>
    <p>Vous pouvez nous laisser votre adresse mail si vous le souhaitez. Vos coordonnées ne feront l’objet d’aucune transmission à des tiers.</p>
  </div>

  <div class="feedback-panel__form-wrapper">
    <form class="feedback-panel__form">
      <div class="feedback-panel__group">
        {{input class="feedback-panel__field feedback-panel__field--email" type="text" value=email placeholder="Votre email (optionnel)"}}
      </div>
      <div class="feedback-panel__group">
        {{textarea class="feedback-panel__field feedback-panel__field--content" value=content placeholder="Votre message" rows=6}}
      </div>

      {{#if error}}
        <div class="alert alert-danger" role="alert">
          {{error}}
        </div>
      {{/if}}
      <button class="feedback-panel__button feedback-panel__button--send" {{action "sendFeedback"}}>Envoyer</button>
      <button class="feedback-panel__button feedback-panel__button--cancel" {{action "cancelFeedback"}}>Annuler</button>
    </form>
  </div>
</div>

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 :

• en dessous de 768px (non-inclus) pour les mobiles exclusivement
• à partir de 768px (inclus) pour les tablettes
• à 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;
}

Palette de couleur

Nous avons opté pour indexer toutes les couleurs du projet par des noms explicites qui les décrivent au mieux en se basant sur ceux fournit ici et ici. Ainsi chaque couleur utilisée est exclusivement déclarée dans notre palette de couleur.

Exemple de déclaration:

$porcelain-grey: #f2f3f4;

Exemple d'utilisation:

.app-footer {
  padding: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  background-color: $porcelain-grey;

  @media (min-width: 992px) {
    flex-direction: row;
    justify-content: space-around;
    margin: 0 auto;
    height: 150px;
  }
}

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: $white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;

  &:hover {
    box-shadow: none;
    border: solid 2px $dogder-blue;
    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 : "[nom_de_la_page]-page".

Exemple de template pour la route /index :

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

Autre exemple de template pour la route /projet :

// templates/project.hbs
<div class="project-page">
  // 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.

Par ailleurs, nous avons convenu de ne pas avoir de classe englobante dans le template, mais d'utiliser, pour les composants, la propriété Ember.Component#classNames. Cela limite les div générées par Ember et a un impact positif sur : perfs, référencement et accessibilité.

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; }