Native CSS-nesting kan forenkle CSS-koden og forbedre den generelle kodingsopplevelsen.
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".
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.
Nested Styling: The Old Way
Nested Styling er en funksjon som er tilgjengelig i mange CSS-forprosessorer som Sass, Stylus og Mindre CSS. Selv om syntaksen kan variere mellom disse forprosessorene, forblir det underliggende konseptet konsekvent. Hvis du ville style alle h1 elementer i en div med klassenavnet til container, i vanlig CSS, ville du skrive:
.container {
background-color: #f2f2f2;
}
.containerh1 {
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:
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>
I kodeblokken ovenfor, div med klassenavnet container har en rød bakgrunnsfarge. Stylingen for h1 elementet ligger i .container blokkere. Dette h1 element 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. Sette ampertegnet foran h1 elementet skal fortelle nettleseren at du målretter mot alle barnet h1 elementer 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:"Hereisapseudoelement.";
}
}
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å s element 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 å hekke medieforespørsler 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 bygge en enkel nettside og utnytte den nestede stilfunksjonen i CSS. Lag en mappe og navngi den hva du vil. I den mappen oppretter du en index.htm og a style.css fil.
I index.htm fil, legg til følgende standardkode:
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>
Kodeblokken ovenfor definerer markeringen for et falskt nyhetsnettsted. Deretter åpner du style.css fil 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: "Writtenby ";
}&: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. De .container velgeren fungerer som rotdybden. Du kan referere til denne velgeren ved å bruke & symbol. 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.
