• B => Black
• E => Element
• M => Modifier

<ul class="mainList mainList--xmas">
<li class="mainList_items">
  <a class="mainList_itemLink mainList_itemLink--isActive" href="./home">Home</a>
</li>
<li class="mainList_items">
  <a class="mainList_itemLink" href="./about">About</a>
</li>
<li class="mainList_items">
  <a class="mainList_itemLink" href="./works">Works</a>
</li>

</ul>

.mainList{
  display: flex;
  justify-content: space-between;
  &--xmas{
    background: green;
  }
  &__item{
    list-style: none;
  }
  &__itemLink{
    color: red;
  &--isActive{
    color: white;
  }
  }
}

Les pseudos attributs before et after permettent de crée des noeuds HTML en CSS, Ils sont essentiellement utilisés pour ajouter des ornements, des décorations ... On peut bien entendu faire animation avec, les positionner pr rapport à leur parent (relative / absolute). Ils doivent obligatoirement avoir un `content:``

<section class="cover">
  <h1 class="cover_mainTitle">Présentation des pseudo-attributs</h1>
</section>

.cover{
  background:red;
  padding:20px;
  &__mainTitle{
    text-align:center;
    font-size:24px;
    color:green;
    &::before,
    &::after {
      content:'';
      posotion:absolute;
      display: block;
      width: 50px;
      height: 50px;
      background: green;
    }::before{
      left:0;
    }
  }::after{
    right:0;
  }
}

• relative a la taille de son parent direct.

.cover{
  font-size: 100%;
  &__mainTitle{
    font-size:.8em;
  }
}

• Le REM est basé sur la taille de racine (soit la balise ) qui, par défaut ) ine valeur de 16px. Afin d'éviter tout calcul; il est nécessaire de l'écraser donnant une base de 10px soit 62,5%.
• Le REM est intéressant à utiliser si les média-queries employées sont en rem également. Cela vous permettra de garder des proportions égles lorsqu'on va redimensionner la page.
• Ses propotions seront également gardées quand l'utilisateur zoomera dans votre page.

html{
  font-size: 62.5%;
}

• Unités relatives ) la taille de votre écran (peu importe le device)
• Attention au VH et à son contenu. 100vh == 100vh quoi qu'il arrive.
• VW : très utile pour les interface fluides.

• Les modificateurs réactifs permettent de spécifier différentes tailles de colonnes, décalages, alignement et distribution aux largeurs de la fenêtre xs, sm, md & lg

• NOTE : Jamais modifier le padding & margin des colonnes

Les font-face permettent de définir les polices d'écriture à utiliser pour afficher le texte de pages web.

@font-face {
   font-family: "Oscour LaPolice";
   src: url("../fonts/Oscour-LaPolice.ttf");
}

.txt {
   font-family: "Oscour LaPolice";
}

Les formats:

• Firefox : .ttf, .woff,
• Chrome : .ttf, .woff, .svg,
• Safari : .ttf, .svg,
• Opéra : .ttf, .svg,
• Internet Explorer L😂L : .eot

outil de responsive design qui permet d'adapter la feuille de style CSS aux differents devices.

body {
  background-color: red;
}

@media screen and (max-width: 992px) {
  body {
    background-color: green;
  }
}

@media screen and (max-width: 600px) {
  body {
    background-color: blue;
  }
}

• NOTE : http://flexboxgrid.com/
• NOTE : https://github.com/h5bp/Front-end-Developer-Interview-Questions Q&A qu'on peu avoir en entretien
• NOTE : http://cssnext.io/ FUTUR DU CSS Actuellement CSS3
• NOTE : https://caniuse.com/ c'est compatible ou pô