Historisk sett har CSS vært et vanskelig språk å jobbe med. CSS-forprosessorer gjorde det lettere å jobbe med CSS og ga også tilleggsfunksjoner som loops, mixins og mer. I løpet av årene har CSS blitt dyktigere og tatt i bruk noen av funksjonene som opprinnelig ble introdusert av CSS-forprosessorer. En slik funksjon er «nested styling».
DAGENS MUO-VIDEO
RULL FOR Å FORTSETTE MED INNHOLD
Nested styling lar utviklere bygge CSS-regler i hverandre, noe som gjenspeiler HTML-strukturen. Dette resulterer i mer organisert og lesbar kode, ettersom forholdet mellom HTML-elementer og deres tilsvarende stiler er visuelt tydelig.
Innholdsfortegnelse
Nested Styling: The Old Way
Nested Styling er en funksjon tilgjengelig i mange CSS-forprosessorer som Sass, Stylus og Less CSS. Selv om syntaksen kan variere mellom disse forprosessorene, forblir det underliggende konseptet konsekvent. Hvis du ønsket å style alle h1-elementene i en div med klassenavnet til container, i vanlig CSS, ville du skrevet:
.container {
background-color: #f2f2f2;
}.container h1 {
font-size: 44px;
}
I en CSS-forprosessor som Less CSS implementerer du nestet stiling slik:
.container{
background-color: #f2f2f2; h1 {
font-size:44px;
}
}
Kodeblokken ovenfor oppnår de samme resultatene som den vanlige CSS-implementeringen, men gjør det enkelt for enhver utviklere som leser koden å forstå hva som skjer. Denne følelsen av «hierarki» var et av de største salgsargumentene til CSS-forprosessorer.
Hekketreet kan hekkes til hvilken som helst dybde uten begrensninger, men det er viktig å være forsiktig, ettersom for dyp hekking kan føre til koding.
Native Nested Styling i CSS
Ikke alle nettlesere har støtte for innebygd nestet stil. De Kan jeg bruke… nettstedet kan hjelpe deg å sjekke om målnettleseren din støtter denne funksjonen.
Innebygd nestet stiling i CSS fungerer på samme måte som CSS-forprosessorer, noe som betyr at det er mulig å neste en hvilken som helst velger inne i en annen. Men det er en viktig forskjell du bør merke deg. Ta en titt på kodeblokken 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 med klassenavnbeholderen rød bakgrunnsfarge. Stylingen for h1-elementet ligger i .container-blokken. Dette h1-elementet har fargen gul. Når du kjører denne koden i nettleseren, kan det hende du legger merke til at noe er galt. Nettleseren bruker riktig rød bakgrunnsfarge på container-div, men h1 har ikke riktig stil.
Dette er fordi nestet styling fungerer litt annerledes i CSS sammenlignet med CSS-forprosessorer som Less. Du kan ikke referere direkte til et HTML-element i et nestet tre. For å fikse dette, må du bruke et og-tegn (&) som illustrert nedenfor:
.container {
background-color: red; & h1 {
color: yellow;
}
}
I kodeblokken ovenfor fungerer & som en referanse til foreldrevelgeren. Hvis du setter og-tegnet før h1-elementet, bør du fortelle nettleseren at du målretter mot alle de underordnede h1-elementene på container-div. Når du kjører koden i nettleseren, bør du se følgende:
Siden & er symbolet som brukes for å referere til et overordnet element, er det fullt mulig å målrette mot et elements pseudo-klasser og pseudo-elementer slik:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Før implementeringen av CSS nestet stil, hvis du hadde som mål å bruke stiler betinget, avhengig av nettleserbredden, måtte du ty til en metode som følgende:
p {
color:black;
}@media (min-width:750px) {
p {
color:gray;
}
}
Når nettleseren gjengir siden, bestemmer den fargen på p-elementet basert på nettleserens bredde. Hvis nettleserens bredde overstiger 750px, bruker den fargen grå; ellers bruker den standardfargen (svart).
Denne implementeringen fungerer fint, men som du kan forestille deg, kan ting raskt bli ganske omfattende, spesielt når du trenger å bruke forskjellige stiler basert på visse regler. Det er nå mulig å neste mediespørringer direkte i stilblokken til et element.
p {
color:black; @media (min-width:750px) {
color:gray;
}
}
Denne kodeblokken gjør stort sett det samme som den forrige, men den kommer med fordelen av å være lett å forstå. Ved bare å se på mediespørringen og det neste overordnede elementet, kan du fortelle hvordan nettleseren vil bruke de riktige stilene når de definerte betingelsene er oppfylt.
Styling av et nettsted med CSS Nested Styles
Det er på tide å sette alt du har lært så langt i praksis ved å bygge et enkelt nettsted og utnytte den nestede styling-funksjonen i CSS. Lag en mappe og navngi den hva du vil. I den mappen oppretter du en index.htm og en style.css-fil.
I index.htm-filen legger du til følgende boilerplate-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>
Kodeblokken ovenfor definerer markeringen for et falskt nyhetsnettsted. Deretter åpner du style.css-filen og legger 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;
}
}
Kodeblokken ovenfor stiler nettstedet helt med CSS nestet stil. .container-velgeren fungerer som rotdybden. Du kan henvise til denne velgeren ved å bruke &-symbolet. Når du kjører koden i nettleseren, bør du se følgende:
Trenger du fortsatt en CSS-forbehandler?
Med introduksjonen av nestede stiler til native CSS, kan CSS-forbehandlere se ut til å være unødvendige. Det er imidlertid viktig å huske på at CSS-forprosessorer tilbyr mer enn bare nestet styling. De tilbyr funksjoner som loops, mixins, funksjoner og mer. Til syvende og sist, om du skal bruke en CSS-forbehandler eller ikke, avhenger av din spesifikke brukssituasjon og personlige preferanser.