Native CSS-nesting kan forenkle din CSS-kode og forbedre din overordnede kodningsoplevelse.
Historisk set har CSS været et svært sprog at arbejde med. CSS-forprocessorer gjorde det lettere at arbejde med CSS og gav også yderligere funktioner som loops, mixins og mere. I årenes løb er CSS blevet mere dygtig og har overtaget nogle af de funktioner, der oprindeligt blev introduceret af CSS-forprocessorer. En sådan funktion er "indlejret styling".
Indlejret styling giver udviklere mulighed for at indlejre CSS-regler i hinanden, hvilket afspejler HTML-strukturen. Dette resulterer i mere organiseret og læsbar kode, da forholdet mellem HTML-elementer og deres tilsvarende stilarter er visuelt tydeligt.
Nested Styling: The Old Way
Nested Styling er en funktion tilgængelig i mange CSS-forprocessorer som Sass, Stylus og Mindre CSS. Selvom syntaksen kan være forskellig blandt disse præprocessorer, forbliver det underliggende koncept konsekvent. Hvis du ville style alle h1 elementer i en div med klassenavnet på beholder, i almindelig CSS ville du skrive:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
I en CSS-forprocessor som Less CSS implementerer du indlejret styling som dette:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Kodeblokken ovenfor opnår de samme resultater som den almindelige CSS-implementering, men gør det nemt for enhver udvikler, der læser koden, at forstå, hvad der foregår. Denne følelse af "hierarki" var et af de største salgsargumenter for CSS-forprocessorer.
Indlejringstræet kan indlejres til enhver dybde uden begrænsninger, men det er vigtigt at være forsigtig, da for dyb indlejring kan føre til kodning.
Native Nested Styling i CSS
Ikke alle browsere understøtter indbygget indlejret styling. Det Kan jeg bruge... webstedet kan hjælpe dig med at kontrollere, om din målbrowser understøtter denne funktion.
Indbygget indlejret styling i CSS fungerer på samme måde som CSS-forprocessorer, hvilket betyder, at det er muligt at indlejre enhver vælger inde i en anden. Men der er en vigtig forskel, som du bør bemærke. Tag et kig 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'en med klassenavnet beholder har en rød baggrundsfarve. Stylingen til h1 element ligger i .beholder blok. Det her h1 element har farven gul. Når du kører denne kode i browseren, vil du muligvis bemærke, at der er noget galt. Browseren anvender korrekt en rød baggrundsfarve på beholder div, men den h1 ikke har den passende stil.
Dette skyldes, at indlejret styling fungerer lidt anderledes i CSS sammenlignet med CSS-forprocessorer som Less. Du kan ikke direkte referere til et HTML-element i et indlejret træ. For at rette dette skal du bruge et og-tegn (&) som illustreret nedenfor:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
I kodeblokken ovenfor, & fungerer som en reference til forældrevælgeren. Sætte et-tegnet før h1 element skal lade browseren vide, at du målretter mod alle børn h1 elementer på beholder div. Når du kører koden i browseren, bør du se følgende:
Siden & er symbolet, der bruges til at referere til et overordnet element, er det meget muligt at målrette et elements pseudo-klasser og pseudo-elementer på denne måde:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Før implementeringen af CSS-indlejret styling, hvis du havde til formål at anvende stilarter betinget, afhængigt af browserbredden, var du nødt til at ty til en metode som følgende:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Når browseren gengiver siden, bestemmer den farven på s element baseret på browserens bredde. Hvis browserbredden overstiger 750px, bruger den farven grå; ellers anvender den standardfarven (sort).
Denne implementering fungerer fint, men som du kan forestille dig, kan tingene hurtigt blive ret omfattende, især når du skal anvende forskellige stilarter baseret på bestemte regler. Det er nu muligt at rede medieforespørgsler direkte i et elements stilblok.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Denne kodeblok gør stort set det samme som den forrige, men den har den fordel, at den er nem at forstå. Ved blot at se på medieforespørgslen og det indlejrede overordnede element kan du se, hvordan browseren vil anvende de relevante stilarter, når de definerede betingelser er opfyldt.
Styling af et websted med CSS Nested Styles
Det er på tide at omsætte alt det, du har lært indtil nu, i praksis opbygning af en simpel hjemmeside og udnyttelse af den indlejrede styling-funktion i CSS. Opret en mappe og navngiv den, hvad du vil. I den mappe skal du oprette en index.htm og en style.css fil.
I den index.htm fil, skal du tilføje følgende kedelkode:
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 opmærkningen for et falsk nyhedswebsted. Åbn derefter style.css fil og tilføj 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 webstedet helt med CSS-indlejret styling. Det .beholder vælgeren fungerer som roddybden. Du kan henvise til denne vælger ved hjælp af & symbol. Når du kører koden i browseren, bør du se følgende:
Har du stadig brug for en CSS Preprocessor?
Med introduktionen af indlejrede stilarter til native CSS, kan CSS-forbehandlere synes at være unødvendige. Det er dog afgørende at huske på, at CSS-forprocessorer tilbyder mere end blot indlejret styling. De giver funktioner som loops, mixins, funktioner og mere. I sidste ende, om du skal bruge en CSS-forprocessor eller ej, afhænger af din specifikke brugssituation og personlige præferencer.
