L'imbrication CSS native peut simplifier votre code CSS et améliorer votre expérience de codage globale.
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 des boucles, des 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 de ces fonctionnalités est le "style imbriqué".
Le style imbriqué permet aux développeurs d'imbriquer des règles CSS les unes dans les autres, reflétant la structure HTML. Cela se traduit par un code plus organisé et 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 comme Sass, stylet et moins de 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
h1 éléments dans un div avec le nom de classe de récipient, en CSS normal, vous écririez :.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
Dans un préprocesseur CSS comme Less CSS, vous implémentez un style imbriqué comme ceci :
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Le bloc de code ci-dessus obtient les mêmes résultats que l'implémentation CSS normale, 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 limitation, mais il est essentiel d'être prudent, car une imbrication trop profonde peut entraîner une verbosité du code.
Style imbriqué natif dans CSS
Tous les navigateurs n'incluent pas la prise en charge du style imbriqué natif. Le Puis-je utiliser... site Web peut vous aider à vérifier si votre navigateur cible prend en charge cette fonctionnalité.
Le style imbriqué natif dans 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 dans un autre. Mais il y a une différence clé que vous devriez noter. Jetez un œil au bloc de code ci-dessous :
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSStitle>
head>
<body>
<divclass="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, le div avec le nom de la classe récipient a une couleur de fond rouge. Le style pour le h1 l'élément réside dans le .récipient bloc. Ce h1 l'élément a la couleur jaune. Lorsque vous exécutez ce code dans le navigateur, vous remarquerez peut-être quelque chose qui ne va pas. Le navigateur applique correctement une couleur de fond rouge au récipient div, mais le h1 n'a pas le style approprié.
En effet, le style imbriqué fonctionne un peu différemment dans CSS par rapport aux préprocesseurs CSS comme Less. Vous ne pouvez pas référencer directement un élément HTML dans une arborescence imbriquée. Pour résoudre ce problème, 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. Mettre l'esperluette avant le h1 l'élément doit indiquer au navigateur que vous ciblez tous les enfants h1 des éléments sur le récipient 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 pseudo-éléments d'un élément comme ceci :
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Avant l'implémentation du style CSS imbriqué, si vous visiez à appliquer des styles de manière conditionnelle, en fonction de la largeur du navigateur, vous deviez recourir à une méthode comme celle-ci :
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Lorsque le navigateur affiche la page, il détermine la couleur du p élément basé sur 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 détaillées, en particulier lorsque vous devez appliquer différents styles en fonction de certaines règles. Il est maintenant possible d'imbriquer requêtes des médias 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 présente l'avantage d'être facile à comprendre. En regardant simplement la requête multimé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 CSS imbriqués
Il est temps de mettre en pratique tout ce que vous avez appris jusqu'à présent en construire un site web simple et tirer parti de la fonctionnalité de style imbriqué dans CSS. Créez un dossier et nommez-le comme vous le souhaitez. Dans ce dossier, créez un index.htm et un style.css déposer.
Dans le index.htm fichier, ajoutez le code passe-partout suivant :
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="style.css" />
<title>Simple Websitetitle>
head>
<body>
<divclass="container">
<divclass="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.h1>
<divclass="meta-data">
<spanclass="author">David Uzonduspan>
<spanclass="time">3 hours agospan>
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>
<divclass="sidebar">
<h2>Trending Articlesh2>
<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. Ensuite, ouvrez le style.css fichier 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: "Writtenby ";
}&: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 avec un style CSS imbriqué. Le .récipient sélecteur agit comme la profondeur de la racine. Vous pouvez faire référence à ce sélecteur à l'aide de la & symbole. Lorsque vous exécutez le code dans le navigateur, vous devriez voir ce qui suit :
Avez-vous toujours besoin d'un préprocesseur CSS?
Avec l'introduction de styles imbriqués dans le CSS natif, les préprocesseurs CSS peuvent sembler inutiles. Cependant, il est crucial de garder à l'esprit que les préprocesseurs CSS offrent plus qu'un simple style imbriqué. Ils fournissent des fonctionnalités telles que des boucles, des mixins, des 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.
