CSS-i pesastamine võib teie CSS-koodi lihtsustada ja parandada üldist kodeerimiskogemust.
Ajalooliselt on CSS-iga töötamine olnud keeruline keel. CSS-i eeltöötlejad muutsid CSS-iga töötamise lihtsamaks ja pakkusid ka lisafunktsioone, nagu tsüklid, mixinid ja palju muud. Aastate jooksul on CSS muutunud võimekamaks ja kasutusele võtnud mõned CSS-i eeltöötlejate poolt algselt kasutusele võetud funktsioonid. Üks selline funktsioon on "pesastatud stiil".
Pesastatud stiil võimaldab arendajatel pesastada CSS-i reegleid üksteise sees, peegeldades HTML-i struktuuri. Selle tulemuseks on paremini organiseeritud ja loetavam kood, kuna seos HTML-i elementide ja neile vastavate stiilide vahel on visuaalselt ilmne.
Pesastatud stiil: vana moodi
Nested Styling on funktsioon, mis on saadaval paljudes CSS-i eelprotsessorid nagu Sass, Stylus ja Less CSS. Kuigi süntaks võib nende eeltöötlejate vahel erineda, jääb selle aluseks olev kontseptsioon järjepidevaks. Kui soovite stiilida kõik h1 elemendid a div klassi nimega konteiner, tavalises CSS-is kirjutaksite:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
CSS-i eelprotsessoris (nt Less CSS) rakendate pesastatud stiili järgmiselt:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Ülaltoodud koodiplokk annab samad tulemused kui tavaline CSS-i juurutamine, kuid muudab koodi lugeva arendaja jaoks hõlpsaks toimuvast aru saada. See "hierarhia" tunne oli CSS-i eeltöötlejate üks suurimaid müügiargumente.
Pesapuud saab piiranguteta pesastada mis tahes sügavusele, kuid oluline on olla ettevaatlik, kuna liiga sügav pesastumine võib põhjustada koodi paljusõnalisust.
Natiivne pesastatud stiil CSS-is
Kõik brauserid ei toeta pesastatud stiili. The Kas ma võin kasutada... veebisait aitab teil kontrollida, kas teie sihtbrauser seda funktsiooni toetab.
Native pesastatud stiil töötab CSS-is sarnaselt CSS-i eelprotsessoritega, mis tähendab, et mis tahes selektorit on võimalik teise sisse pesastada. Kuid on üks oluline erinevus, millele peaksite tähelepanu pöörama. Vaadake allolevat koodiplokki:
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>
Ülaltoodud koodiplokis div klassi nimega konteiner on punase taustavärviga. Stiil h1 element peitub .konteiner blokk. See h1 elemendil on kollane värv. Kui käivitate selle koodi brauseris, võite märgata midagi valesti. Brauser rakendab õigesti punase taustavärvi konteiner div, kuid h1 pole sobivat stiili.
Selle põhjuseks on asjaolu, et pesastatud stiil töötab CSS-is pisut teisiti kui CSS-i eelprotsessorid, nagu Less. Pesastatud puus ei saa HTML-elemendile otse viidata. Selle parandamiseks peate kasutama ampersandi (&) nagu allpool näidatud:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
Ülaltoodud koodiplokis & toimib viitena vanemvalijale. Asetades ampersandi ette h1 element peaks andma brauserile teada, et sihite kõiki lapsi h1 elemendid peal konteiner div. Kui käivitate koodi brauseris, peaksite nägema järgmist.
Alates & on sümbol, mida kasutatakse emaelemendile viitamiseks, on täiesti võimalik sihtida elemendi pseudoklasse ja pseudoelemente järgmiselt:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Kui püüdsite enne CSS-i pesastatud stiili rakendamist kasutada stiile tingimuslikult, sõltuvalt brauseri laiusest, pidite kasutama järgmist meetodit:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Kui brauser lehe renderdab, määrab see lehe värvi lk element brauseri laiuse alusel. Kui brauseri laius ületab 750 pikslit, kasutab see halli värvi; muul juhul rakendab see vaikevärvi (must).
See teostus toimib hästi, kuid nagu võite ette kujutada, võivad asjad muutuda kiiresti paljusõnaliseks, eriti kui peate teatud reeglite alusel rakendama erinevaid stiile. Nüüd on võimalik pesitseda meedia päringud otse elemendi stiiliplokis.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
See koodiplokk teeb põhimõtteliselt sama, mis eelmine, kuid selle eeliseks on see, et seda on lihtne mõista. Vaadates lihtsalt meediumipäringut ja pesastuvat emaelementi, saate teada, kuidas brauser rakendab määratud tingimuste täitmisel sobivaid stiile.
Veebisaidi kujundamine CSS-i pesastatud stiilidega
On aeg rakendada kõike, mida olete seni õppinud, praktikas lihtsa veebisaidi loomine ja CSS-i pesastatud stiilifunktsiooni võimendamine. Looge kaust ja nimetage see kuidas soovite. Looge selles kaustas an index.htm ja a stiil.css faili.
Aastal index.htm faili, lisage järgmine standardkood:
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>
Ülaltoodud koodiplokk määratleb näidisuudiste veebisaidi märgistuse. Järgmisena avage stiil.css faili ja lisage järgmine kood:
.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;
}
}
Ülaltoodud koodiplokk kujundab veebisaidi täielikult CSS-i pesastatud stiiliga. The .konteiner valija toimib juure sügavusena. Sellele valijale saate viidata kasutades & sümbol. Kui käivitate koodi brauseris, peaksite nägema järgmist.
Kas vajate endiselt CSS-i eelprotsessorit?
Pesastatud stiilide kasutuselevõtuga algsesse CSS-i võivad CSS-i eeltöötlejad tunduda mittevajalikud. Siiski on oluline meeles pidada, et CSS-i eelprotsessorid pakuvad enamat kui lihtsalt pesastatud stiili. Need pakuvad funktsioone, nagu silmused, mikserid, funktsioonid ja palju muud. Lõppkokkuvõttes sõltub see, kas kasutada CSS-i eelprotsessorit või mitte, teie konkreetsest kasutusjuhtumist ja isiklikest eelistustest.
