Fragmenter le style des media queries dans le selecteur

12 septembre 2023

TL;DR

Fragmenter dans le selecteur le style présent dans les media queries

Contributeurs

Suxue Li, Julie Brunetto, Guillaume Moizan, Dorian De Rosa

Statut

Accepté

Contexte

Nous cherchons à standardiser notre code et à établir un processus de décision concernant l'emplacement du style pour les différentes queries.

Décision

Le style des différents media queries sera fragmenté et positionné le plus près possible du sélecteur, sauf dans le cas exceptionnel où les versions mobile et desktop sont fondamentalement différentes. Dans ce dernier cas, les développeurs auront la liberté de diviser le style en deux blocs distincts. L'objectif de cette décision est d'accroître la clarté du code en consolidant autant que possible le code lié à un bloc, éliminant ainsi la nécessité de faire défiler la page pour y accéder.

Conséquences

• Dans la situation normale, nous écrirons notre code de la manière suivante :

.maClasse {
  padding: 1rem;

  @include utilities.media(large) {
    padding: 2rem;
  }
}

• Dans le cas où les versions mobile et desktop diffèrent considérablement, nous opterons pour la structure suivante :

.maClasse {
  padding: 1rem;
}

//...

@include utilities.media(large) {
  .maClasse {
    padding: 2rem;
  }
}