demo.md

SCSS

Exemple de code

Exemple code html :

<div class="patate">
  <ul>
    <li>
      <span class="frite-chaud">Bla</span>
      <span class="frite-froid">Bla Bla</span>
    </li>
   <ul>
</div>

Mauvais Exemple de SCSS :

.patate {
  ul {
    li {
      .frite-chaud {
        background-color: "red";
      }
      .frite-froid {
        background-color: "blue";
      }
    }
  }
}

Bon Exemple de SCSS :

.patate {
  ul {
    li {
      .frite {
        &-chaud {
          background-color: "red";
        }
        &-froid {
          background-color: "blue";
        }
      }
    }
  }
}

Mettre le SCSS DANS les composants directement, pas de gros MAIN sauf pour des éléments récurent et petit et dump tel qu'un bouton.

Fonts

Utiliser les h1, h2, h3, h4 , etc pour les titres, les fonts et size serons configuré à la racine pour s'assurer que tous le monde utilise les mêmes.

Couleurs

Ne pas hardcoder de couleur directement dans le code sauf si c'est une utilisation unique qui ne sera jamais réutilisé ailleurs.

Utiliser les références vers les couleurs prédéfini, vous pouvez ajouter des couleurs, modifier les couleurs pour fiter dans notre thème global, ne pas avoir trop de couleur différente, garder ça simple.

Component

Search

<template>
  <div>
    <div class="search-bar">
      <div class="result-list">
        Ma list de résultat de recherche
      </div>
    </div>
  </div>
</template>

User Profile

<template>
  <div>
    <div class="user-profil">
      <div class="user-image-list">
        Ma list des images d'un utilisateur
      </div>
    </div>
  </div>
</template>

Pour éviter de dédoubler du code, on ne va pas mettre le CSS dans un gros fichier et mettre le même nom de class, si les élément font la même chose soit le rendering d'un liste de quelque chose on va juste créer un composant qui aura le css de mise en page.

List Component

<template>
  <div>
    <div v-for .... />
  </div>
</template>

Search

<template>
  <div>
    <div class="search-bar">
      <list-component list_to_render="searchResults" />
    </div>
  </div>
</template>

User Profile

<template>
  <div>
    <div class="user-profil">
      <list-component list_to_render="userPosts" />
    </div>
  </div>
</template>

Vu les similarités qu'on retrouve dans nos divers views, si nos views ne partage aucun component c'est un indicateur qu'on fait énormément de dédoublement de code et ça se reflètera surement sur la note.