Historisk sett har CSS ofte blitt oppfattet som et utfordrende språk å mestre. CSS-preprosessorer introduserte enklere arbeidsmetoder og leverte tilleggsfunksjoner som løkker, miksins og mer avansert funksjonalitet. CSS har derimot utviklet seg betydelig, og har integrert mange av de funksjonene som opprinnelig ble introdusert av CSS-preprosessorer. Et slikt fremskritt er «nested styling».
DAGENS MUO-VIDEO
RULL FOR Å FORTSETTE MED INNHOLD
Med nested styling kan utviklere bygge CSS-regler inne i hverandre, som gjenspeiler HTML-strukturen. Dette skaper mer organisert og lesbar kode, siden forholdet mellom HTML-elementer og deres tilhørende stiler blir tydelig og visuelt intuitivt.
Nested Styling: Den Gamle Metoden
Nested styling er en funksjon som finnes i flere CSS-preprosessorer, som Sass, Stylus og Less CSS. Selv om syntaksen kan variere mellom disse preprosessorene, er det grunnleggende konseptet det samme. Hvis man ønsket å style alle h1-elementer innenfor en div med klassen «container» i ren CSS, ville man skrevet:
.container {
background-color: #f2f2f2;
}.container h1 {
font-size: 44px;
}
I en CSS-preprosessor som Less CSS, implementerer du nested styling som følger:
.container{
background-color: #f2f2f2; h1 {
font-size:44px;
}
}
Koden over oppnår de samme resultatene som den tradisjonelle CSS-implementeringen, men den gjør det lettere for enhver utvikler som leser koden å forstå strukturen. Denne følelsen av «hierarki» var et av de sterkeste salgsargumentene for CSS-preprosessorer.
Nesting kan utvides til alle dybder uten begrensninger, men det er viktig å være forsiktig, da for dyp nesting kan føre til vanskeligere vedlikehold av koden.
Nativ Nested Styling i CSS
Det er viktig å merke seg at ikke alle nettlesere har full støtte for innebygd nested styling. Nettstedet Kan jeg bruke… gir deg oppdaterte data om nettleserstøtte for denne funksjonen.
Innebygd nested styling i CSS fungerer på en lignende måte som CSS-preprosessorer, som betyr at en hvilken som helst selektor kan nestes inne i en annen. Det er imidlertid en viktig forskjell du bør være klar over. Se på koden nedenfor:
<!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>
I kodeblokken ovenfor har div-elementet med klassen «container» en rød bakgrunn. Stilen for h1-elementet er plassert inne i .container-blokken. Dette h1-elementet skal ha gul farge. Hvis du prøver å kjøre denne koden i nettleseren, vil du se at det ikke fungerer som forventet. Nettleseren bruker riktig rød bakgrunnsfarge på container-diven, men h1-elementet har ikke riktig stil.
Dette skyldes at nested styling fungerer litt annerledes i CSS sammenlignet med CSS-preprosessorer som Less. Du kan ikke referere direkte til et HTML-element i en nested blokk. For å løse dette, må du bruke et ampersand-tegn (&) som vist nedenfor:
.container {
background-color: red; & h1 {
color: yellow;
}
}
I koden ovenfor fungerer &-tegnet som en referanse til den overordnede selektoren. Ved å plassere &-tegnet foran h1-elementet, forteller du nettleseren at du ønsker å style alle de underordnede h1-elementene i container-diven. Når du kjører koden i nettleseren, skal du se følgende:
Ettersom &-tegnet fungerer som en referanse til et overordnet element, er det fullt mulig å style pseudo-klasser og pseudo-elementer til et element på følgende måte:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Før innføringen av nested styling i CSS, måtte man ty til en metode som den nedenfor for å style elementer basert på nettleserens bredde:
p {
color:black;
}@media (min-width:750px) {
p {
color:gray;
}
}
Når nettleseren gjengir siden, vil den velge fargen på p-elementet basert på nettleserens bredde. Hvis bredden er over 750px, vil den velge grå farge, ellers bruker den svart som standard.
Denne løsningen fungerer bra, men som man kan forestille seg, kan den bli vanskelig å vedlikeholde, spesielt når man må bruke forskjellige stiler basert på ulike regler. Nå er det mulig å nest media-queries direkte i stilblokken til et element.
p {
color:black; @media (min-width:750px) {
color:gray;
}
}
Denne kodeblokken gjør i hovedsak det samme som den forrige, men den er enklere å forstå. Ved å se på media-query og det neste overordnede elementet, forstår man lett hvordan nettleseren vil anvende de riktige stilene når de definerte betingelsene er oppfylt.
Styling av et Nettsted med CSS Nested Styles
La oss sette det vi har lært til nå ut i praksis ved å bygge et enkelt nettsted og bruke nested styling i CSS. Lag en mappe med et selvvalgt navn. Opprett to filer inne i denne mappen: index.htm og style.css.
I index.htm-filen legger du til følgende standard HTML-kode:
<!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="https://wilku.top/how-to-use-native-css-nesting-in-your-web-applications/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>
Koden over definerer strukturen for en fiktiv nyhetsnettside. Åpne så style.css-filen og legg til følgende kode:
.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;
}
}
Koden ovenfor styler nettstedet ved hjelp av CSS nested styling. .container-selektoren fungerer som rotnivå. Du kan referere til denne selektoren med &-symbolet. Når du åpner siden i nettleseren, ser du noe lignende dette:
Trenger du Fortsatt en CSS-Preprosessor?
Med introduksjonen av nested styling i CSS, kan det virke som at CSS-preprosessorer er overflødige. Det er likevel viktig å huske at CSS-preprosessorer tilbyr mer enn bare nested styling. De tilbyr funksjoner som løkker, miksins, funksjoner og mer. Om du bør bruke en CSS-preprosessor eller ikke, avhenger av ditt konkrete behov og personlige preferanser.