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”.
DAGENS MUO-VIDEO
RUL FOR AT FORTSÆTTE MED INDHOLD
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.
Indholdsfortegnelse
Nested Styling: The Old Way
Nested Styling er en funktion tilgængelig i mange CSS-forprocessorer som Sass, Stylus og Less CSS. Selvom syntaksen kan være forskellig blandt disse præprocessorer, forbliver det underliggende koncept konsekvent. Hvis du ville style alle h1-elementerne i en div med klassenavnet på containeren i almindelig CSS, ville du skrive:
.container {
background-color: #f2f2f2;
}.container h1 {
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 overdrevent 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:
<!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’en med klassenavnbeholderen en rød baggrundsfarve. Stylingen til h1-elementet ligger i .containerblokken. Dette 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 til container-div, men h1 har ikke 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 løse 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. Hvis du sætter et-tegnet før h1-elementet, skal du fortælle browseren, at du målretter mod alle de underordnede h1-elementer på container-div. Når du kører koden i browseren, bør du se følgende:
Da & 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:"Here is a pseudo element.";
}
}
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å p-elementet 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 indlejre medieforespørgsler direkte i stilblokken for et element.
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 tid til at omsætte alt, hvad du har lært indtil nu, i praksis ved at bygge et simpelt websted og udnytte 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 filen index.htm skal du tilføje 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 opmærkningen for et falsk nyhedswebsted. Åbn derefter filen style.css 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: "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 webstedet helt med CSS-indlejret styling. .containervælgeren fungerer som roddybden. Du kan henvise til denne vælger ved at bruge &-symbolet. 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.
