CSS : le sélecteur de préfixe est adopté

Ce qui se passe

Le CSS Working Group a formellement adopté la proposition de sélecteur de préfixe de classe, et l'a ajoutée au brouillon de Selectors Level 5.

La proposition n'est pas neuve : Lea Verou l'avait publiée en 2024 et la défend depuis. Ce qui est nouveau, c'est son adoption officielle et son entrée dans la spécification.

Le problème

Le cas d'usage tient en quatre lignes. Vous avez une classe de base et ses variantes :

/* La classe de base */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

Pour appliquer le même socle à .btn-primary, .btn-secondary, .btn-danger — et aux suivantes — trois options aujourd'hui, aucune satisfaisante.

Tout lister, et maintenir la liste à chaque nouvelle variante :

.btn-primary,
.btn-secondary,
.btn-danger { /* … */ }

Les sélecteurs de sous-chaîne, qu'il faut doubler pour couvrir les éléments portant plusieurs classes, et dont les performances sont mauvaises :

[class^="btn-"],
[class*=" btn-"] { /* … */ }

Les attributs data-, qui imposent en plus de modifier le HTML, sans être moins verbeux pour autant.

La nouvelle syntaxe

.btn-* {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

Quelques points de spécification à connaître :

• Spécificité (0,1,0) — celle d'un sélecteur de classe. Le brouillon l'implique sans l'énoncer explicitement pour l'instant, mais c'est cohérent : .prefix-* n'est pas différent, en nature, de .prefix-variation.
• En syntaxe imbriquée, l'écriture &-* devrait fonctionner, ce qui est probablement la forme la plus lisible du lot.
• L'étoile ne vaut qu'après un tiret. .prefix*, .prefix-*-suffix et .prefix_* ne sont pas valides — la porte reste entrouverte sur le cas du tiret bas.

La vraie réserve

Elle n'est pas syntaxique, elle est temporelle. Ce sélecteur n'est pas une amélioration progressive.

Étendre une fonction de couleur, comme le passage de rgba() à la notation rgb(… / …), est rétrocompatible : l'ancienne écriture continue de fonctionner, et rien ne casse pendant la transition. Ici, un navigateur qui ne connaît pas la règle l'ignore purement et simplement — et vos variantes perdent leur style.

Il faudra donc l'envelopper :

@supports selector(.prefix-*) {
  /* … */
}

…le temps que l'implémentation devienne courante et entre dans Baseline. Et c'est là que l'argument se retourne : si l'ergonomie est le principal atout de la proposition, elle est précisément ce qu'on perd pendant l'attente.

Les sélecteurs de sous-chaîne ne deviennent pas obsolètes pour autant : ils conservent leurs autres cas d'usage.

Ce que ça change en pratique

Rien tout de suite. Aucun navigateur n'implémente encore la fonctionnalité — l'adoption concerne la spécification, pas les moteurs de rendu.

Mais la décision compte pour quiconque conçoit une convention de nommage. Les systèmes qui préfixent leurs variantes — BEM, bibliothèques de composants, classes utilitaires — gagnent une façon de cibler une famille entière sans la lister ni payer le coût des sélecteurs d'attribut. C'est le genre de décision qui oriente une architecture CSS pour plusieurs années.