Historiquement, CSS a été un langage difficile à utiliser. Les préprocesseurs CSS ont facilité l’utilisation de CSS et 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.
Styles imbriqués : 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 d’un préprocesseur à l’autre, le concept sous-jacent reste cohérent. Si vous voulez styliser tous les h1 éléments en a div avec le nom de classe conteneuren CSS normal, vous écririez :
.container {
background-color: #f2f2f2;
}.container h1 {
font-size: 44px;
}
Dans un préprocesseur CSS comme Less CSS, vous implémentez le style imbriqué comme suit :
.container{
background-color: #f2f2f2; h1 {
font-size:44px;
}
}
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 la stylisation imbriquée native. Le site Web Can I use… peut vous aider à vérifier si votre navigateur cible prend en charge cette fonctionnalité.
Le style imbriqué natif en CSS fonctionne de la même manière que les 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 y a une différence essentielle que vous devez noter. Jetez un coup d’œil au bloc de code ci-dessous :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSS</title>
</head>
<body>
<div class="container">
<h1>Hello from the children of planet Earth!</h1>
</div>
<style>
.container {
background-color: red; h1 {
color: yellow;
}
}
</style>
</body>
</html>
Dans le bloc de code ci-dessus, la div portant le nom de classe conteneur a une couleur de fond rouge. Le style de l’élément h1 l’élément se trouve dans le .container bloc. Ce bloc h1 a la 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 conteneur div, mais la balise h1 n’a pas le style approprié.
Cela 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 corriger cela, vous devez utiliser une esperluette (& ;), comme illustré ci-dessous :
.container {
background-color: red; & h1 {
color: yellow;
}
}
Dans le bloc de code ci-dessus, & ; agit comme une référence au sélecteur parent. En plaçant l’esperluette avant le sélecteur h1 doit permettre au navigateur de savoir que vous ciblez tous les enfants de l’élément h1 éléments sur le conteneur div. Lorsque vous exécutez le code dans le navigateur, vous devriez voir ce qui suit :
Puisque & ; 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 de cette manière :
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Avant la mise en œuvre des styles imbriqués CSS, si vous vouliez appliquer des styles de manière conditionnelle, en fonction de la largeur du navigateur, vous deviez recourir à une méthode comme la suivante :
p {
color:black;
}@media (min-width:750px) {
p {
color:gray;
}
}
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 dépasse 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.
p {
color:black; @media (min-width:750px) {
color:gray;
}
}
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 regardant 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 sont 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 style.css fichier.
Dans le index.htm ajoutez le code de base suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Simple Website</title>
</head>
<body>
<div class="container">
<div class="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<div class="meta-data">
<span class="author">David Uzondu</span>
<span class="time">3 hours ago</span>
</div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
quae laudantium.
</div>
</div>
<div class="sidebar">
<h2>Trending Articles</h2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!</h4>
</div>
</div>
</body>
</html>
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 :
.container {
display: flex;
gap: 25px; @media(max-width:750px) {
flex-direction: column;
}
.article{
width:90%;
}
& div:nth-child(3) {
text-align: justify;
}
& span {
color: rgb(67, 66, 66);
&:nth-child(1)::before {
font-style: italic;
content: "Written by ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
Le bloc de code ci-dessus stylise entièrement le site web à l’aide d’un style imbriqué CSS. Le bloc de code ci-dessus stylise entièrement le site web avec un style imbriqué CSS. .container fait office de profondeur racine. Vous pouvez faire référence à ce sélecteur à l’aide de la méthode & ; symbole. 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 CSS natif, les préprocesseurs CSS peuvent sembler inutiles. Cependant, il est essentiel de garder à l’esprit que les préprocesseurs CSS offrent 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.