Nesting CSS natif et BEM : chaque composant dans un seul bloc, media queries comprises

Pour modifier une carte produit, vous jonglez entre trois endroits de la feuille de style : la règle du bloc en haut, la variante du bouton un peu plus bas, les media queries tout à la fin.
Le nesting CSS natif regroupe tout cela dans une seule règle, sans Sass ni Less, directement compris par les navigateurs récents.
Combiné à la méthode BEM, il donne des composants que l'on replie, relit et déplace d'un projet à l'autre en un bloc. Encore faut-il savoir où s'arrêter : trop d'imbrications recréent exactement les sélecteurs à rallonge que BEM cherche à éviter.

Nesting CSS natif et BEM : ce que vous saurez faire

Le cours part d'une carte simple, puis applique la méthode à une fiche produit complète.

• Regrouper un bloc, ses éléments et ses variantes dans une même règle
• Savoir quand l'esperluette est indispensable et quand elle est superflue
• Donner un état de survol à une variante sans réécrire son sélecteur
• Garder le responsive d'un composant à l'intérieur de son bloc
• Limiter l'imbrication à deux niveaux pour rester fidèle à BEM
• Choisir entre un bouton élément du composant et un bouton autonome
• Réutiliser un composant dans un autre projet sans rien réécrire

Media queries imbriquées : le responsive rangé dans le composant

Sur une feuille de style qui s'allonge, les media queries finissent en bas du fichier, loin des règles qu'elles modifient. Ici, elles s'écrivent à l'intérieur du composant, en mobile first avec des seuils en min-width, et le mot-clé screen devient facultatif. Le composant embarque ainsi son propre comportement responsive : copié dans un autre projet, il s'adapte sans qu'on aille chercher ses règles ailleurs. Si les points de rupture restent flous pour vous, le cours Comprendre les media queries pour le responsive reprend les bases.

La pyramide de code : quand l'imbrication trahit BEM

Le nesting pousse à glisser un élément dans un autre, puis un troisième dans le deuxième. Une vidéo entière montre ce qui se passe alors sur la carte produit, et pourquoi la bonne structure s'arrête à deux niveaux : le bloc, puis ses éléments ciblés directement. C'est la suite logique de l'épisode sur la méthode BEM, qui posait le nommage bloc, élément, modificateur que ce cours imbrique.

Atelier fiche produit et fichier modèle réutilisable

L'exercice construit une fiche produit de chaussures de sport : HTML sémantique, attributs ARIA, classes BEM, puis un CSS réparti en trois composants (layout, bouton, carte produit). Le bouton reçoit ses états de survol, d'appui et de focus clavier visible. Le tout s'appuie sur un fichier modèle commenté qui reprend les couches vues dans le cours sur la cascade, la spécificité et les layers. Ce fichier et une fiche récapitulative du nesting vous sont fournis pour démarrer vos prochains projets.

Pour qui

Le badge Intermédiaire est justifié : vous écrivez déjà du HTML et du CSS sans aide, et vous connaissez Flexbox et Grid, utilisés sans être réexpliqués. Le cours est le troisième épisode d'une série sur le CSS moderne. Il se suit seul si vous savez ce qu'est BEM et une couche @layer ; sinon, commencez par les deux épisodes précédents. Uniquement du CSS natif, écrit dans Visual Studio Code et testé dans un navigateur à jour.

Pour aller plus loin

La dernière vidéo annonce l'épisode suivant de la série, consacré aux variables CSS : tokens primitifs, tokens sémantiques et contrats de variables à l'intérieur des composants, pour enrichir encore le fichier modèle.