Sélecteurs d’extension et d’espace réservé
Partagez des styles entre sélecteurs à l’aide de @extend et de sélecteurs d’espace réservé silencieux.
Sélecteurs d’extension et d’espace réservé est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
@extend dans Sass
@extend permet à un sélecteur d’hériter de tous les styles d’un autre. Au lieu de dupliquer le code, l’extension crée un ensemble de règles partagé dans le CSS compilé.
<div class="error">Error message</div>
<div class="critical-error">Critical error message</div>
Sélecteurs d’espace réservé
Un sélecteur d’espace réservé (préfixé par %) définit un bloc de styles qui n’est jamais compilé seul, mais uniquement lorsqu’il est étendu. Il ne génère aucun CSS tant qu’aucun élément ne l’étend.
<div class="product-card">Product card</div>
<div class="profile-card">Profile card</div>
Pourquoi préférer les espaces réservés aux classes
L’extension d’une classe réelle ajoute tout le contexte du sélecteur de cette classe au résultat compilé. Les espaces réservés sont plus propres : ils produisent des sélecteurs regroupés uniquement pour les sélecteurs qui les étendent.
Résultat compilé de @extend
Lorsque plusieurs sélecteurs étendent le même espace réservé, Sass les regroupe dans une règle séparée par des virgules :
<div class="product-card">Product card</div>
<div class="profile-card">Profile card</div>
Pièges de @extend
@extend présente plusieurs inconvénients importants :
- ne peut pas être utilisé dans des requêtes multimédias
- peut produire des sélecteurs regroupés volumineux et inattendus lorsque des chaînes d’extensions se forment
- rend le CSS compilé plus difficile à relier aux fichiers sources
Compromis entre @extend et les mixins
Comparaison :
@extend: CSS plus léger (règles partagées), mais chaînes de sélecteurs complexes et limitations dans les requêtes multimédias@mixin: duplique les déclarations, mais offre un comportement plus prévisible et peut être utilisé dans les requêtes multimédias
Le mixin est généralement préférable
Dans la pratique moderne de Sass, les mixins sont généralement préférés à @extend. HTTP/2 et la compression gzip rendent la duplication des déclarations moins importante, tandis que la facilité de débogage des mixins compense largement la différence minime de taille du CSS.
Quand @extend est pertinent
@extend (avec des espaces réservés) est approprié lorsque :
- plusieurs sélecteurs partagent réellement le même état sémantique (par exemple, les états d’erreur)
- vous ne vous trouvez pas dans une requête multimédia
- les styles de base sont stables et bien définis
Espaces réservés et personnalisation du thème
Les espaces réservés conviennent bien aux ensembles d’utilitaires semblables à des réinitialisations, dont plusieurs composants héritent :
<a href="#" class="skip-link">Skip to content</a>
<span class="sr-label">Screen reader label</span>
Considération relative à l’obsolescence
Certains guides de style et certaines équipes interdisent complètement @extend en raison de sa complexité et de l’augmentation du nombre de sélecteurs qu’il peut provoquer. Évaluez les compromis et respectez les conventions de votre équipe.
Vérification rapide
Quelle est la différence entre l’extension d’une classe ordinaire et celle d’un sélecteur d’espace réservé (%) ?
Récapitulatif
@extend permet à un sélecteur d’hériter des styles d’un autre, en regroupant les sélecteurs dans le CSS compilé. Les espaces réservés (%name) ne produisent rien lors de la compilation tant qu’ils ne sont pas étendus, ce qui est plus propre que d’étendre de vraies classes. Évitez @extend dans les requêtes multimédias. Dans Sass moderne, les mixins sont généralement préférés à @extend pour leur prévisibilité et leur facilité de débogage.
Questions Fréquemment Posées
La leçon « Sélecteurs d’extension et d’espace réservé » est-elle gratuite ?
Oui — le texte complet de « Sélecteurs d’extension et d’espace réservé » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Sélecteurs d’extension et d’espace réservé » ?
Partagez des styles entre sélecteurs à l’aide de @extend et de sélecteurs d’espace réservé silencieux. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Sélecteurs d’extension et d’espace réservé » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Imbrication des variables et fichiers partiels
- Mixins et inclusions
- Sélecteurs d’extension et d’espace réservé
- Fonctions Sass et flux de contrôle