Vietējā CSS ligzdošana var vienkāršot jūsu CSS kodu un uzlabot vispārējo kodēšanas pieredzi.
Vēsturiski CSS ir bijusi sarežģīta valoda, ar kuru strādāt. CSS priekšapstrādātāji atviegloja darbu ar CSS, kā arī nodrošināja papildu funkcijas, piemēram, cilpas, mixinus un daudz ko citu. Gadu gaitā CSS ir kļuvis spējīgāks un pieņēmis dažas no funkcijām, kuras sākotnēji ieviesa CSS priekšapstrādātāji. Viena no šādām funkcijām ir "ligzdotas stils".
Ligzdotais stils ļauj izstrādātājiem ligzdot CSS kārtulas cita citai, atspoguļojot HTML struktūru. Tā rezultātā kods ir sakārtotāks un lasāmāks, jo attiecības starp HTML elementiem un tiem atbilstošajiem stiliem ir vizuāli redzamas.
Nested Styling: Old Way
Nested Styling ir daudzās valstīs pieejama funkcija CSS priekšapstrādātāji, piemēram, Sass, Stylus un Less CSS. Lai gan sintakse šiem priekšapstrādātājiem var atšķirties, pamatā esošā koncepcija paliek konsekventa. Ja vēlaties veidot stilu visu h1 elementi a div ar klases nosaukumu konteiners, parastajā CSS, jūs rakstītu:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
CSS priekšapstrādātājā, piemēram, Less CSS, jūs ieviešat ligzdotu stilu, piemēram:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Iepriekš minētais koda bloks nodrošina tādus pašus rezultātus kā parastā CSS ieviešana, taču ikvienam izstrādātājam, kas lasa kodu, ir viegli saprast, kas notiek. Šī "hierarhijas" sajūta bija viens no lielākajiem CSS priekšapstrādātāju pārdošanas punktiem.
Ligzdošanas koku var ligzdot jebkurā dziļumā bez ierobežojumiem, taču ir svarīgi būt piesardzīgiem, jo pārāk dziļa ligzdošana var izraisīt koda daudzvārdību.
Vietējais ligzdotais stils CSS
Ne visas pārlūkprogrammas atbalsta vietējo ligzdoto stilu. The Vai es varu izmantot... vietne var palīdzēt pārbaudīt, vai jūsu mērķa pārlūkprogramma atbalsta šo funkciju.
Vietējais ligzdotais stils CSS darbojas līdzīgi kā CSS priekšapstrādātāji, kas nozīmē, ka ir iespējams ievietot jebkuru atlasītāju citā. Bet ir viena būtiska atšķirība, kas jums jāņem vērā. Apskatiet tālāk esošo koda bloku:
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>
Iepriekš esošajā koda blokā div ar klases nosaukumu konteiners ir sarkana fona krāsa. Stils priekš h1 elements atrodas .konteiners bloķēt. Šis h1 elementam ir dzeltena krāsa. Palaižot šo kodu pārlūkprogrammā, iespējams, pamanīsit kaut ko nepareizi. Pārlūkprogramma pareizi piemēro sarkanu fona krāsu konteiners div, bet h1 nav atbilstoša stila.
Tas ir tāpēc, ka ligzdotais stils CSS darbojas nedaudz savādāk nekā CSS priekšapstrādātāji, piemēram, Less. Jūs nevarat tieši atsaukties uz HTML elementu ligzdotā kokā. Lai to labotu, jums ir jāizmanto simbols & (&), kā parādīts zemāk:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
Iepriekš esošajā koda blokā & darbojas kā atsauce uz vecāku atlasītāju. Ieliekot & pirms h1 elementam ir jāinformē pārlūkprogramma, ka mērķauditorija tiek atlasīta visiem bērniem h1 elementi uz konteiners div. Palaižot kodu pārlūkprogrammā, jums vajadzētu redzēt šādu informāciju:
Kopš & ir simbols, ko izmanto, lai atsauktos uz vecāku elementu, ir pilnīgi iespējams atlasīt elementa pseidoklases un pseidoelementus, piemēram:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Pirms CSS ligzdotā stila ieviešanas, ja jūs gribējāt piemērot stilus nosacīti, atkarībā no pārlūkprogrammas platuma, jums bija jāizmanto šāda metode:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Kad pārlūkprogramma atveido lapu, tā nosaka tās krāsu lpp elements, pamatojoties uz pārlūkprogrammas platumu. Ja pārlūkprogrammas platums pārsniedz 750 pikseļus, tiek izmantota pelēka krāsa; pretējā gadījumā tiek piemērota noklusējuma krāsa (melna).
Šī ieviešana darbojas labi, taču, kā jau varat iedomāties, lietas var ātri kļūt diezgan detalizētas, it īpaši, ja jums ir jāpiemēro dažādi stili, pamatojoties uz noteiktiem noteikumiem. Tagad ir iespējams ligzdot mediju vaicājumi tieši elementa stila blokā.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Šis koda bloks pamatā dara to pašu, ko iepriekšējais, taču tam ir priekšrocība, ka tas ir viegli saprotams. Apskatot multivides vaicājumu un ligzdošanas vecākelementu, varat noteikt, kā pārlūkprogramma izmantos atbilstošos stilus, kad tiks izpildīti noteiktie nosacījumi.
Vietnes veidošana, izmantojot CSS ligzdotos stilus
Ir pienācis laiks likt lietā visu, ko līdz šim esat iemācījies vienkāršas vietnes izveide un CSS ligzdotās stila funkcijas izmantošana. Izveidojiet mapi un nosauciet to, kā vēlaties. Šajā mapē izveidojiet a index.htm un a stils.css failu.
Iekš index.htm failu, pievienojiet šādu standarta kodu:
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>
Iepriekš minētais koda bloks nosaka marķējumu viltus ziņu vietnei. Pēc tam atveriet stils.css failu un pievienojiet šādu kodu:
.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;
}
}
Iepriekš minētais koda bloks veido vietni pilnībā ar CSS ligzdotu stilu. The .konteiners selektors darbojas kā saknes dziļums. Varat atsaukties uz šo atlasītāju, izmantojot & simbols. Palaižot kodu pārlūkprogrammā, jums vajadzētu redzēt šādu informāciju:
Vai jums joprojām ir nepieciešams CSS priekšprocesors?
Ieviešot ligzdotos stilus vietējā CSS, CSS priekšapstrādātāji var šķist nevajadzīgi. Tomēr ir ļoti svarīgi paturēt prātā, ka CSS priekšapstrādātāji piedāvā vairāk nekā tikai ligzdotu stilu. Tie nodrošina tādas funkcijas kā cilpas, mixins, funkcijas un daudz ko citu. Galu galā tas, vai izmantot CSS priekšapstrādātāju vai nē, ir atkarīgs no jūsu konkrētā lietošanas gadījuma un personīgajām vēlmēm.
