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 :

• 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 : "<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.

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