Native CSS-nesting kan uw CSS-code vereenvoudigen en uw algehele codeerervaring verbeteren.
Historisch gezien is CSS een moeilijke taal geweest om mee te werken. CSS-preprocessors maakten het gemakkelijker om met CSS te werken en boden ook extra functies zoals loops, mixins en meer. In de loop der jaren is CSS capabeler geworden en heeft het een aantal functies overgenomen die oorspronkelijk door CSS-preprocessors zijn geïntroduceerd. Een van die kenmerken is "geneste styling".
Met geneste styling kunnen ontwikkelaars CSS-regels in elkaar nesten, die de HTML-structuur weerspiegelen. Dit resulteert in meer georganiseerde en leesbare code, omdat de relatie tussen HTML-elementen en hun overeenkomstige stijlen visueel duidelijk is.
Geneste styling: de oude manier
Geneste styling is een functie die in veel beschikbaar is CSS-preprocessors zoals Sass, Stylus en Minder CSS. Hoewel de syntaxis tussen deze preprocessors kan verschillen, blijft het onderliggende concept consistent. Als je alles wilt stylen h1 elementen in een div met de klassenaam van container, in gewone CSS zou je schrijven:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
In een CSS-preprocessor zoals Less CSS implementeer je geneste styling als volgt:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Het bovenstaande codeblok bereikt dezelfde resultaten als de reguliere CSS-implementatie, maar maakt het voor elke ontwikkelaar die de code leest gemakkelijk om te begrijpen wat er aan de hand is. Dit gevoel van "hiërarchie" was een van de grootste verkoopargumenten van CSS-preprocessors.
De nestboom kan zonder beperkingen tot elke diepte worden genest, maar het is essentieel om voorzichtig te zijn, aangezien een te diepe nesting kan leiden tot breedsprakigheid van de code.
Native geneste styling in CSS
Niet alle browsers bieden ondersteuning voor native geneste styling. De Kan ik gebruiken... website kan u helpen controleren of uw doelbrowser deze functie ondersteunt.
Native geneste styling in CSS werkt op dezelfde manier als CSS-preprocessors, wat betekent dat het mogelijk is om elke selector in een andere te nesten. Maar er is één belangrijk verschil dat u moet opmerken. Bekijk het onderstaande codeblok:
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>
In het codeblok hierboven, de div met de klassenaam container heeft een rode achtergrondkleur. De huisstijl voor de h1 element ligt in de .container blok. Dit h1 element heeft de kleur geel. Wanneer u deze code in de browser uitvoert, merkt u mogelijk dat er iets mis is. De browser past correct een rode achtergrondkleur toe op het container div, maar de h1 heeft niet de juiste styling.
Dit komt omdat geneste styling iets anders werkt in CSS in vergelijking met CSS-preprocessors zoals Less. U kunt niet rechtstreeks verwijzen naar een HTML-element in een geneste boomstructuur. Om dit op te lossen, moet u een ampersand gebruiken (&) zoals hieronder afgebeeld:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
In het codeblok hierboven, & fungeert als een verwijzing naar de bovenliggende selector. De ampersand voor de h1 element moet de browser laten weten dat u zich op het hele kind richt h1 elementen op de container div. Wanneer u de code in de browser uitvoert, zou u het volgende moeten zien:
Sinds & is het symbool dat wordt gebruikt om naar een bovenliggend element te verwijzen, het is heel goed mogelijk om de pseudoklassen en pseudo-elementen van een element als volgt te targeten:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Voorafgaand aan de implementatie van CSS geneste styling, moest je, als je stijlen voorwaardelijk wilde toepassen, afhankelijk van de browserbreedte, je toevlucht nemen tot een methode zoals de volgende:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Wanneer de browser de pagina weergeeft, bepaalt deze de kleur van de P element op basis van de browserbreedte. Als de browserbreedte groter is dan 750px, wordt de kleur grijs gebruikt; anders wordt de standaardkleur (zwart) toegepast.
Deze implementatie werkt prima, maar zoals je je kunt voorstellen, kunnen dingen snel behoorlijk uitgebreid worden, vooral wanneer je verschillende stijlen moet toepassen op basis van bepaalde regels. Het is nu mogelijk om te nestelen mediavragen direct in het stijlblok van een element.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Dit codeblok doet in principe hetzelfde als het vorige, maar heeft het voordeel dat het gemakkelijk te begrijpen is. Door alleen naar de mediaquery en het geneste bovenliggende element te kijken, kunt u zien hoe de browser de juiste stijlen toepast wanneer aan de gedefinieerde voorwaarden wordt voldaan.
Een website stylen met CSS-geneste stijlen
Het is tijd om alles wat je tot nu toe hebt geleerd in de praktijk te brengen eenvoudige website bouwen en gebruikmaken van de geneste stylingfunctie in CSS. Maak een map aan en noem deze zoals je wilt. Maak in die map een index.htm en een stijl.css bestand.
In de index.htm bestand, voeg de volgende boilerplate-code toe:
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>
Het bovenstaande codeblok definieert de opmaak voor een mock-nieuwswebsite. Open vervolgens de stijl.css bestand en voeg de volgende code toe:
.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;
}
}
Het codeblok hierboven geeft de website volledig vorm met CSS geneste styling. De .container selector fungeert als de worteldiepte. U kunt naar deze selector verwijzen met behulp van de & symbool. Wanneer u de code in de browser uitvoert, zou u het volgende moeten zien:
Heeft u nog steeds een CSS-preprocessor nodig?
Met de introductie van geneste stijlen in native CSS, lijken CSS-preprocessors misschien overbodig. Het is echter cruciaal om in gedachten te houden dat CSS-preprocessors meer bieden dan alleen geneste styling. Ze bieden functies zoals loops, mixins, functies en meer. Uiteindelijk hangt het al dan niet gebruik van een CSS-preprocessor af van uw specifieke gebruiksscenario en persoonlijke voorkeuren.
