Nesting

On se souvient du chapitre sur les sélecteurs combinés? Quand je vous disais que, pour cet HTML...

<article>
  <h2>Titre</h2>
  <p>ma description</p>
  <a><button>Visiter</button></a>
</article>

...on pouvait avoir ce CSS?

article {
}

article h2 {
}

article p {
}

article button {
}

Eh bien en fait, depuis un petit moment maintenant, on peut écrire ceci, qui est encore mieux

article {
  h2 {
  }

  p {
  }

  button {
  }
}

&

Le & est le sélecteur parent de la déclaration en cours.

J'imagine qu'un exemple vaux mieux qu'une explication plus detaillée.

article{ /* mes <article> */
  & p{ /* les <p> de "mes <article>" */
    & em { /* les <em> de "les <p> de "mes <article>""*/

    }
  }
}

Après, en règle générale, si vous allez plus profond que le niveau 2, c'est que vous êtes en train de faire une connerie. C'est rigolo de faire compliqué quand on sent qu'on peut le faire, mais derrière ça l'est vachement moins à débugger.

Implicite

On peut transformer cette sélection:

article:hover > p {
}

en ceci:

article:hover {
  & > p {
  }
}

Il a été question à un moment d'obliger cette écriture parcequ'elle est explicite, et d'ailleurs je vous encourage a vous y tenir. Mais en soi, touts les sélecteurs internes à une déclaration comme & > p commencent toutes par & implicitement.

J'aurais pu écrire

article:hover {
  > p {
  }
}

Avec les pseudos

Au-dela de tout ça c'est super agréable de pouvoir inclure les stylisations conditionelles dans la déclaration de base.

Là où avant on devait écrire

article {
  color: black;
}

article:hover {
  color: grey;
}

article:focus {
  color: blue;
}

On peut écrire

article {
  color: black;

  &:hover {
    color: grey;
  }

  &:focus {
    color: blue;
  }
}

Ce qui est encore plus marrant quand on a des gamins à styliser, parce qu'avant on avait...

article {
  color: black;
}

article:hover {
  color: grey;
}

article:hover em {
  text-decoration: underline dotted;
}

article:focus {
  color: blue;
}

article:focus em {
  text-decoration: underline;
}

et maintenant on a...

article {
  color: black;

  &:hover {
    color: grey;

    em {
      text-decoration: underline dotted;
    }
  }

  &:focus {
    color: blue;

    em {
      text-decoration: underline;
    }
  }
}

Media queries 2 : le retour

Avant on avait essentiellement une grosse feuille de style qu'on venait écraser avec des grosses media-queries, comme vu précédemment.

mais, maintenant on peut les mettres dans les déclarations.

Au lieu de...

body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

@media screen and (width <= 800px) {
  body {
    grid-template-columns: repeat(6, 1fr);
  }
}

...on peut juste:

body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);

  @media screen and (width <= 800px) {
    grid-template-columns: repeat(6, 1fr);
  }
}

Bienvenue dans les chapitres 5.x

À partir de maintenant vous connaissez officiellement assez d'outils pour être dangereux. Vous pouvez faire des trucs super farfelus qui marchent. À partir de maintenant, c'est le moment de cultiver le goût et l'élégance. Pour être excellent ce n'est pas juste une question de faire fonctionner les choses, mais de le faire d'une manière qui communique vos intentions et votre vision de la manière la plus simple et la plus claire possible.