Le World Wide Web Consortium (W3C) a publié le premier projet de travail d’un nouveau module pour l’imbrication des règles de style (CSS Nesting Module). Au stade actuel de premier projet de travail public, il reste à savoir si le consortium donnera son approbation finale au module et l’inclura dans les spécifications CSS. Les feuilles de style en cascade (CSS) disposent de leur propre groupe de travail au sein de l’organisation (groupe de travail CSS), qui a présenté la proposition et y travaille actuellement.

Règles de style groupées pour des feuilles de style en cascade plus lisibles

La motivation de cette poussée est la répétition du contenu lié au style qui était nécessaire jusqu’à présent. Selon le groupe de travail, les doublons rendent les feuilles de style CSS confuses et leur maintenance est assez coûteuse. L’option d’imbrication envisagée devrait permettre aux développeurs de regrouper des règles de style connexes. Selon les auteurs du projet de travail, cela rendra les feuilles de style plus lisibles et plus faciles à maintenir.

Par exemple, le balisage CSS suivant pourrait également être présenté de manière plus compacte :

table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

L’imbrication permettrait de regrouper les règles de style et de les rendre plus claires :

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

Selon le Working Draft, les règles de style « imbriquées » se comportent comme des règles de style ordinaires dans la mesure où elles attribuent des propriétés aux éléments par le biais de sélecteurs. Toutefois, ils reprennent le contexte du sélecteur parent (règle parent) et peuvent s’appuyer sur le sélecteur parent – sans répétitions superflues. En termes de syntaxe, l’imbrication directe et un @nest-sont prévus. Une règle ainsi distinguée n’est valable que dans le cadre d’une règle de style particulière ; elle perd sa validité dans d’autres contextes.

Méthodes équivalentes : Règle @nest et imbrication directe

Dans l’imbrication directe, en revanche, les développeurs écrivent la règle de style pour qu’elle soit intégrée dans la règle parent, et le sélecteur de cette règle « imbriquée » devrait être marqué comme un préfixe (imbriqué-préfixé). Dans le libellé du Working Draft, cela signifie : « Un sélecteur d’imbrication doit être le premier sélecteur simple dans le premier sélecteur composite du sélecteur. Si le sélecteur consiste en une liste de sélecteurs, chaque sélecteur complexe de la liste doit être « imbriqué » pour que l’ensemble du sélecteur (composite) soit « imbriqué ». » (§ 2.1 Emboîtement direct)

Cela semble compliqué, en tant que code CSS cela ressemble à ceci pour les imbrications valides :

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

Les deux méthodes, à savoir l’imbrication directe et l’imbrication limitée avec les @nest-sont équivalentes du point de vue de leur fonctionnalité. Selon le projet, la raison pour laquelle deux règles sont nécessaires est que tout ne peut pas être imbriqué directement.

Détails et réserves sur le module d’imbrication

Le projet de travail va encore plus loin dans le détail et, outre les exceptions et les études de cas, les règles conditionnelles et les sélecteurs individuels, il énumère également l’ensemble exact des règles de la spécification dans laquelle le module envisagé serait intégré. L’introduction officielle du module d’imbrication affecterait également d’autres spécifications, qui devraient être adaptées en conséquence. Par exemple, les bases des sélecteurs de niveau 4 et d’un document appelé CSS 2.1 (Cascading Style Sheets Level 2 Revision 1) devraient apparemment être révisées.

L’extension des extensions est considérée comme délicate car les changements ne sont pas intégrés dans la norme officielle depuis longtemps. Par conséquent, selon le groupe de travail CSS, il y a une certaine prolifération, et les équipes de développement doivent s’appuyer sur des pages dites « instantanées » qui compilent ce qui est actuellement valide. En outre, toutes les modifications devront également être transférées dans le document de suivi CSS 2.2 (c’est-à-dire la deuxième version révisée des feuilles de style en cascade de niveau 2).

Travaux en cours : la poursuite des travaux au W3C

Si vous voulez y regarder de plus près, vous trouverez un index avec la terminologie spécifiée et les références liées à la fin du projet de travail. Actuellement, le projet du 31 août 2021 est considéré comme l’état des lieux, mais selon le préambule, les versions futures remplaceront cet état des lieux. Toute personne souhaitant rester à jour sur le sujet peut s’inscrire sur les listes de diffusion correspondantes au W3C.

[sih]