Comment utiliser l’imbrication CSS native dans vos applications Web

Historiquement, CSS a été un langage difficile à utiliser. Les préprocesseurs CSS ont facilité le travail avec CSS et ont également fourni des fonctionnalités supplémentaires telles que les boucles, les mixins, etc. Au fil des ans, CSS est devenu plus performant et a adopté certaines des fonctionnalités introduites à l’origine par les préprocesseurs CSS. L’une d’entre elles est le « style imbriqué ».

Le style imbriqué permet aux développeurs d’imbriquer les règles CSS les unes dans les autres, reflétant ainsi la structure HTML. Il en résulte un code mieux organisé et plus lisible, car la relation entre les éléments HTML et leurs styles correspondants est visuellement apparente.

Style imbriqué : L’ancienne méthode

Le style imbriqué est une fonctionnalité disponible dans de nombreux préprocesseurs CSS tels que Sass, Stylus et Less CSS. Bien que la syntaxe puisse différer entre ces préprocesseurs, le concept sous-jacent reste cohérent. Si vous vouliez styliser tous les éléments h1 dans un fichier div dont le nom de classe est conteneur Dans un CSS normal, vous écririez

Dans un préprocesseur CSS comme Less CSS, vous implémentez le style imbriqué comme suit :

Le bloc de code ci-dessus permet d’obtenir les mêmes résultats que l’implémentation CSS classique, mais permet à tout développeur lisant le code de comprendre facilement ce qui se passe. Ce sens de la « hiérarchie » était l’un des principaux arguments de vente des préprocesseurs CSS.

L’arbre d’imbrication peut être imbriqué à n’importe quelle profondeur sans limites, mais il est essentiel d’être prudent, car une imbrication trop profonde peut entraîner une verbosité du code.

Style imbriqué natif en CSS

Tous les navigateurs ne prennent pas en charge l’imbrication native des styles. Le style imbriqué natif n’est pas pris en charge par tous les navigateurs. Puis-je utiliser. peut vous aider à vérifier si votre navigateur cible prend en charge cette fonctionnalité.

Le style imbriqué natif en CSS fonctionne de manière similaire aux préprocesseurs CSS, ce qui signifie qu’il est possible d’imbriquer n’importe quel sélecteur à l’intérieur d’un autre. Mais il existe une différence essentielle que vous devez noter. Jetez un coup d’œil au bloc de code ci-dessous :

Dans le bloc de code ci-dessus, la div portant le nom de classe conteneur a une couleur d’arrière-plan rouge. Le style de la div h1 se trouve dans l’élément . conteneur du bloc. Cet élément h1 est de couleur jaune. Lorsque vous exécutez ce code dans le navigateur, vous pouvez remarquer quelque chose d’anormal. Le navigateur applique correctement une couleur d’arrière-plan rouge à l’élément du conteneur mais le conteneur h1 n’a pas le style approprié.

Ceci est dû au fait que les styles imbriqués fonctionnent différemment en CSS par rapport aux préprocesseurs CSS tels que Less. Vous ne pouvez pas référencer directement un élément HTML dans un arbre imbriqué. Pour résoudre ce problème, vous devez utiliser une esperluette (&), comme illustré ci-dessous :

Dans le bloc de code ci-dessus, & agit comme une référence au sélecteur parent. En plaçant l’esperluette avant le h1 devrait indiquer au navigateur que vous ciblez tous les éléments enfants h1 sur l’élément sur le conteneur div. Lorsque vous exécutez le code dans le navigateur, vous devriez voir ce qui suit :

Depuis & est le symbole utilisé pour référencer un élément parent, il est tout à fait possible de cibler les pseudo-classes et les pseudo-éléments d’un élément comme ceci :

Emboîtement des requêtes média

Avant la mise en œuvre des styles imbriqués CSS, si vous souhaitiez appliquer des styles de manière conditionnelle, en fonction de la largeur du navigateur, vous deviez recourir à une méthode comme la suivante :

Lorsque le navigateur rend la page, il détermine la couleur de l’élément p en fonction de la largeur du navigateur. Si la largeur du navigateur est supérieure à 750px, il utilise la couleur grise ; sinon, il applique la couleur par défaut (noir).

Cette implémentation fonctionne bien, mais comme vous pouvez l’imaginer, les choses peuvent rapidement devenir assez verbeuses, en particulier lorsque vous devez appliquer différents styles en fonction de certaines règles. Il est désormais possible d’imbriquer les requêtes média directement dans le bloc de style d’un élément.

Ce bloc de code fait essentiellement la même chose que le précédent, mais il a l’avantage d’être facile à comprendre. En examinant simplement la requête média et l’élément parent imbriqué, vous pouvez savoir comment le navigateur appliquera les styles appropriés lorsque les conditions définies seront remplies.

Styliser un site web avec des styles imbriqués CSS

Il est temps de mettre en pratique tout ce que vous avez appris jusqu’à présent en construisant un site Web simple et en exploitant la fonction de style imbriqué de CSS. Créez un dossier et donnez-lui le nom que vous souhaitez. Dans ce dossier, créez un fichier index.htm et un fichier style.css .

Dans le fichier index.htm ajoutez le code boilerplate suivant :

Le bloc de code ci-dessus définit le balisage d’un faux site web d’actualités. Ouvrez ensuite le fichier style.css et ajoutez le code suivant :

Le bloc de code ci-dessus stylise entièrement le site web à l’aide d’un style imbriqué CSS. Le. conteneur fait office de profondeur racine. Vous pouvez faire référence à ce sélecteur en utilisant le sélecteur & pour faire référence à ce sélecteur. Lorsque vous exécutez le code dans le navigateur, vous devriez voir ce qui suit :

Avez-vous encore besoin d’un préprocesseur CSS ?

Avec l’introduction des styles imbriqués dans le langage CSS natif, les préprocesseurs CSS peuvent sembler inutiles. Cependant, il est essentiel de garder à l’esprit que les préprocesseurs CSS offrent bien plus qu’un simple style imbriqué. Ils offrent des fonctionnalités telles que les boucles, les mixins, les fonctions, etc. En fin de compte, l’utilisation ou non d’un préprocesseur CSS dépend de votre cas d’utilisation spécifique et de vos préférences personnelles.