Native CSS-kapsling kan förenkla din CSS-kod och förbättra din övergripande kodningsupplevelse.
Historiskt sett har CSS varit ett svårt språk att arbeta med. CSS-förprocessorer gjorde det lättare att arbeta med CSS och gav även ytterligare funktioner som loopar, mixins och mer. Under åren har CSS blivit mer kapabel och antagit några av de funktioner som ursprungligen introducerades av CSS-förprocessorer. En sådan funktion är "nested styling".
Kapslad stil tillåter utvecklare att kapsla CSS-regler inom varandra, vilket återspeglar HTML-strukturen. Detta resulterar i mer organiserad och läsbar kod, eftersom förhållandet mellan HTML-element och deras motsvarande stilar är visuellt uppenbart.
Nested Styling: The Old Way
Nested Styling är en funktion som finns tillgänglig i många CSS-förprocessorer som Sass, Stylus och Mindre CSS. Även om syntaxen kan skilja sig åt mellan dessa förprocessorer, förblir det underliggande konceptet konsekvent. Om du ville styla alla h1 element i en div med klassnamnet på behållare, i vanlig CSS skulle du skriva:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
I en CSS-förprocessor som Less CSS implementerar du kapslad stil så här:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Kodblocket ovan uppnår samma resultat som den vanliga CSS-implementeringen men gör det enkelt för alla utvecklare som läser koden att förstå vad som pågår. Denna känsla av "hierarki" var en av de största försäljningsargumenten för CSS-förprocessorer.
Det häckande trädet kan kapslas till vilket djup som helst utan begränsningar, men det är viktigt att vara försiktig, eftersom alltför djupa kapslingar kan leda till kodförmåga.
Native Nested Styling i CSS
Alla webbläsare har inte stöd för inbyggd kapslad stil. De Kan jag använda... webbplats kan hjälpa dig att kontrollera om din målwebbläsare stöder den här funktionen.
Native kapslade styling i CSS fungerar på samma sätt som CSS-förprocessorer, vilket innebär att det är möjligt att kapsla valfri väljare inuti en annan. Men det finns en viktig skillnad som du bör notera. Ta en titt på kodblocket nedan:
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 kodblocket ovan, div med klassnamnet behållare har en röd bakgrundsfärg. Stylingen för h1 elementet ligger i .behållare blockera. Detta h1 element har färgen gul. När du kör den här koden i webbläsaren kanske du märker något fel. Webbläsaren tillämpar korrekt en röd bakgrundsfärg på behållare div, men den h1 inte har rätt utformning.
Detta beror på att kapslad styling fungerar lite annorlunda i CSS jämfört med CSS-förprocessorer som Less. Du kan inte direkt referera till ett HTML-element i ett kapslat träd. För att fixa detta måste du använda ett et-tecken (&) som illustreras nedan:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
I kodblocket ovan, & fungerar som en referens till föräldraväljaren. Sätt et-tecken före h1 element ska låta webbläsaren veta att du riktar in dig på alla barn h1 element på behållare div. När du kör koden i webbläsaren bör du se följande:
Eftersom & är symbolen som används för att referera till ett överordnat element, är det fullt möjligt att rikta in ett elements pseudoklasser och pseudoelement så här:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Före implementeringen av CSS kapslad stil, om du hade som mål att tillämpa stilar villkorligt, beroende på webbläsarens bredd, var du tvungen att tillgripa en metod som följande:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
När webbläsaren renderar sidan bestämmer den färgen på sid element baserat på webbläsarens bredd. Om webbläsarens bredd överstiger 750px, använder den färgen grå; annars tillämpas standardfärgen (svart).
Den här implementeringen fungerar bra, men som du kan föreställa dig kan saker snabbt bli ganska omfattande, speciellt när du behöver använda olika stilar baserat på vissa regler. Det är nu möjligt att häcka mediefrågor direkt i stilblocket för ett element.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Detta kodblock gör i princip samma sak som det tidigare, men det kommer med fördelen att det är lätt att förstå. Genom att bara titta på mediefrågan och det kapslade överordnade elementet kan du se hur webbläsaren kommer att tillämpa lämpliga stilar när de definierade villkoren är uppfyllda.
Styla en webbplats med CSS-kapslade stilar
Det är dags att omsätta allt du har lärt dig hittills i praktiken bygga en enkel webbplats och utnyttja den kapslade stylingfunktionen i CSS. Skapa en mapp och namnge den vad du vill. I den mappen skapar du en index.htm och a style.css fil.
I den index.htm fil, lägg till följande typkod:
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>
Kodblocket ovan definierar uppmärkningen för en skennyhetswebbplats. Öppna sedan style.css fil och lägg till följande kod:
.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;
}
}
Kodblocket ovan stilar webbplatsen helt med CSS-kapslad stil. De .behållare väljaren fungerar som rotdjupet. Du kan referera till denna väljare med hjälp av & symbol. När du kör koden i webbläsaren bör du se följande:
Behöver du fortfarande en CSS-förprocessor?
Med introduktionen av kapslade stilar till inbyggd CSS kan CSS-förprocessorer tyckas vara onödiga. Det är dock viktigt att komma ihåg att CSS-förprocessorer erbjuder mer än bara kapslad styling. De tillhandahåller funktioner som loopar, mixins, funktioner och mer. I slutändan, om du ska använda en CSS-förprocessor eller inte beror på ditt specifika användningsfall och personliga preferenser.
