Les différences entre CSS natif et Sass Nesting

Depuis son lancement, CSS a obstinément refusé de prendre en charge une syntaxe pour les sélecteurs d'imbrication. L'alternative a toujours été d'utiliser un préprocesseur CSS comme Sass. Mais aujourd’hui, l’imbrication fait officiellement partie du CSS natif. Vous pouvez essayer cette fonctionnalité directement dans les navigateurs modernes.

Si vous migrez depuis Sass, vous devrez prendre en compte toutes les différences entre l’imbrication native et l’imbrication Sass. Il existe des différences clés entre les deux fonctionnalités d'imbrication, et il est crucial d'en être conscient si vous effectuez le changement.

Vous devez utiliser "&" avec les sélecteurs d'éléments en CSS natif

CSS Nesting est encore un projet de spécification, avec une prise en charge variable par les navigateurs. Assurez-vous de consulter des sites comme caniuse.com pour des informations à jour.

Voici un exemple du type d'imbrication que vous verriez dans Sass, en utilisant la syntaxe SCSS :

.nav {
ul { display: flex; }
a { color: black; }
}

Ce bloc CSS spécifie que toute liste non ordonnée à l'intérieur d'un élément avec un navigation la classe s'aligne comme une colonne flexible, une façon de disposition des éléments HTML sur la page. De plus, tout le texte du lien d'ancrage à l'intérieur des éléments avec un navigation la classe devrait être noire.

Or, en CSS natif, ce type d’imbrication ne serait pas valide. Pour que cela fonctionne, vous devrez inclure le symbole esperluette (&) devant les éléments imbriqués, comme ceci :

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

La première version de l'imbrication CSS ne permettait pas l'imbrication des sélecteurs de type. Un changement récent signifie que vous n'avez plus besoin d'utiliser "&", mais les anciennes versions de Chrome et Safari ne prennent peut-être pas encore en charge cette syntaxe mise à jour.

Maintenant, si vous utilisiez un sélecteur qui commence par un symbole (par exemple un sélecteur de classe) pour cibler une partie spécifique de la page, vous pouvez omettre l'esperluette. Ainsi, la syntaxe suivante fonctionnerait à la fois en CSS natif et en Sass :

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

Vous ne pouvez pas créer un nouveau sélecteur en utilisant "&" en CSS natif

L'une des fonctionnalités que vous aimez probablement chez Sass est la possibilité de faire quelque chose comme ceci :

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

Ce code Sass se compile avec le CSS brut suivant :

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

En CSS natif, vous ne pouvez pas créer un nouveau sélecteur en utilisant "&". Le compilateur Sass remplace le "&" par l'élément parent (par ex. .nav), mais le CSS natif traitera le "&" et la partie qui le suit comme deux sélecteurs distincts. En conséquence, il tentera de créer un sélecteur composé, ce qui ne donnera pas le même résultat.

Cet exemple fonctionnera cependant en CSS natif :

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

Cela fonctionne parce que le premier sélecteur est le même que nav.nav-list en CSS simple, et le second est le même que nav.nav-lien. Ajouter un espace entre le "&" et le sélecteur équivaudrait à écrire nav .nav-liste.

En CSS natif, si vous utilisez l'esperluette comme ceci :

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

C'est la même chose que d'écrire ceci :

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

Cela pourrait vous surprendre, étant donné que les deux __nav-liste et __nav-lien sont à l'intérieur du .nav sélecteur. Mais l'esperluette place en fait les éléments imbriqués devant l'élément parent.

La spécificité peut être différente

Une autre chose à noter est l'impact sur la spécificité qui ne se produit pas dans Sass mais dans l'imbrication CSS native.

Alors disons que vous avez un Et un élément. Avec le CSS suivant, un dans l'un ou l'autre de ces éléments, une police serif sera utilisée :

#main, article {
h2 {
font-family: serif;
 }
}

La version compilée du code Sass ci-dessus est la suivante :

#mainh2,
articleh2 {
font-family: serif;
}

Mais la même syntaxe d'imbrication dans le CSS natif produira un résultat différent, en réalité le même que :

:is(#main, article) h2 {
font-family: serif;
}

Le est() le sélecteur gère les règles de spécificité légèrement différemment de l'imbrication Sass. En gros, la spécificité de :est() est automatiquement mis à niveau vers l'élément le plus spécifique de la liste des arguments fournis.

L'ordre des éléments peut modifier l'élément sélectionné

L'imbrication dans du CSS natif peut complètement changer ce que signifie réellement le sélecteur (c'est-à-dire sélectionner un élément complètement différent).

Prenons par exemple le code HTML suivant :

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

Et le CSS suivant :

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

Voici le résultat si vous utilisez Sass comme compilateur CSS :

Maintenant dans le bloc HTML, si vous deviez déplacer le avec la classe de Thème sombre à l'intérieur de celui de appel à l'action, cela casserait le sélecteur (en mode Sass). Mais lorsque vous passez au CSS standard (c'est-à-dire sans préprocesseur CSS), les styles continueront à fonctionner.

Cela est dû à la façon dont le :est() fonctionne sous le capot. Ainsi, le CSS imbriqué ci-dessus se compile dans le CSS simple suivant :

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

Ceci précise un .titre c'est un descendant des deux .Thème sombre et .appel à l'action. Mais l’ordre de ceux-ci n’a pas vraiment d’importance. Tant que le .titre est le descendant de .appel à l'action et .Thème sombre, cela fonctionne dans les deux ordres.

Il s’agit d’un cas limite et pas quelque chose que vous rencontrerez si souvent. Mais comprendre le :est() La fonctionnalité sous-jacente du sélecteur peut vous aider à maîtriser le fonctionnement de l'imbrication en CSS. Cela fait aussi déboguer votre CSS beaucoup plus facile.

Apprenez à utiliser Sass dans React

Étant donné que Sass compile en CSS, vous pouvez l'utiliser avec pratiquement n'importe quel framework d'interface utilisateur. Vous pouvez installer le préprocesseur CSS dans les projets Vue, Preact, Svelte et, bien sûr, React. Le processus de configuration de Sass pour tous ces frameworks est également assez simple.

Le plus grand avantage de l'utilisation de Sass dans React est qu'il vous permet d'écrire des styles propres et réutilisables à l'aide de variables et de mixins. En tant que développeur React, savoir utiliser Sass vous aidera à écrire un code plus propre et plus efficace et fera de vous un meilleur développeur global.