U istorijskom kontekstu, CSS je bio poznat kao jezik koji nije jednostavan za rad. CSS preprocesori su znatno olakšali rad sa CSS-om, nudeći dodatne funkcionalnosti kao što su petlje, miksini i mnoge druge. Vremenom, CSS je napredovao i usvojio neke od karakteristika koje su prvobitno bile uvedene kroz CSS preprocesore. Jedna od tih ključnih karakteristika je „ugnježđeno stilizovanje“.
MUO VIDEO DANA
POMERITE DA BISTE NASTAVILI SA SADRŽAJEM
Ugnježđeno stilizovanje omogućava programerima da CSS pravila ugnježđuju jedno u drugo, oponašajući HTML strukturu. Ovo rezultira bolje organizovanim i čitljivijim kodom, jer je veza između HTML elemenata i njihovih odgovarajućih stilova vizuelno jasna.
Ugnježđeno stilizovanje: Stari pristup
Ugnježđeno stilizovanje je funkcionalnost koja je dostupna u mnogim CSS preprocesorima, kao što su Sass, Stylus i Less CSS. Iako sintaksa može da se razlikuje među ovim preprocesorima, osnovni koncept ostaje isti. Ako želite da stilizujete sve h1 elemente unutar div-a sa klasom „container“, u običnom CSS-u, pisali biste ovako:
.container {
background-color: #f2f2f2;
}
.container h1 {
font-size: 44px;
}
U CSS preprocesoru, kao što je Less CSS, implementirali biste ugnježđeno stilizovanje na sledeći način:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Gornji blok koda postiže isti rezultat kao i obična CSS implementacija, ali olakšava svakom programeru koji čita kod da razume šta se dešava. Taj osećaj „hijerarhije“ je bio jedna od najjačih prednosti CSS preprocesora.
Stablo ugnježđavanja može biti duboko ugnježđeno bez ograničenja, ali je ključno biti oprezan, jer preterano duboko ugnježđavanje može da dovede do prekomplikovanog koda.
Izvorno ugnježđeno stilizovanje u CSS-u
Ne podržavaju svi pregledači izvorno ugnježđeno stilizovanje. Web stranica Can I Use… vam može pomoći da proverite da li vaš ciljani pregledač podržava ovu funkcionalnost.
Izvorno ugnježđeno stilizovanje u CSS-u funkcioniše slično kao i u CSS preprocesorima, što znači da je moguće ugnjezditi bilo koji selektor unutar drugog. Međutim, postoji jedna ključna razlika na koju treba da obratite pažnju. Pogledajte sledeći blok koda:
<!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>
U bloku koda iznad, div sa klasom „container“ ima crvenu boju pozadine. Stil za h1 element se nalazi unutar .container bloka. Ovaj h1 element ima žutu boju. Kada pokrenete ovaj kod u pregledaču, možda ćete primetiti da nešto nije kako treba. Pregledač ispravno primenjuje crvenu boju pozadine na div „container“, ali h1 nema odgovarajući stil.
To je zato što ugnježđeno stilizovanje radi malo drugačije u CSS-u u poređenju sa CSS preprocesorima kao što je Less. Ne možete direktno referencirati HTML element u ugnježđenom stablu. Da biste ovo ispravili, morate koristiti ampersand (&) kao što je prikazano u nastavku:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
U gornjem bloku koda, & deluje kao referenca na roditeljski selektor. Stavljanjem ampersanda ispred h1 elementa, trebalo bi da omogućite pregledaču da razume da ciljate sve potomke h1 elemente koji se nalaze u div-u sa klasom „container“. Kada pokrenete kod u pregledaču, trebalo bi da vidite sledeće:
S obzirom da je & simbol koji se koristi za upućivanje na roditeljski element, sasvim je moguće ciljati pseudo-klase i pseudo-elemente elementa na sledeći način:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Pre implementacije CSS ugnježđenog stilizovanja, ako ste želeli da primenite stilove uslovno, u zavisnosti od širine pregledača, morali ste da pribegnete metodi sličnoj sledećoj:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Kada pregledač prikaže stranicu, on određuje boju p elementa na osnovu širine pregledača. Ako širina pregledača prelazi 750 piksela, koristi se siva boja; u suprotnom, primenjuje se podrazumevana boja (crna).
Ova implementacija funkcioniše dobro, ali, kao što možete pretpostaviti, stvari mogu brzo da postanu prilično opširne, posebno kada treba da primenite različite stilove na osnovu određenih pravila. Sada je moguće ugnjezditi medijske upite direktno u stilski blok elementa.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Ovaj blok koda radi suštinski isto kao i prethodni, ali ima prednost što je lakši za razumevanje. Samo gledanjem medijskog upita i roditeljskog elementa u koji je ugnježđen, možete reći kako će pregledač primeniti odgovarajuće stilove kada se ispune definisani uslovi.
Stilizovanje web stranice pomoću CSS ugnježđenog stilizovanja
Vreme je da sve što ste do sada naučili primenite u praksi tako što ćete napraviti jednostavnu web stranicu i iskoristiti funkcionalnost ugnježđenog stilizovanja u CSS-u. Napravite folder i nazovite ga po želji. U tom folderu napravite datoteku index.html i style.css.
U datoteku index.html dodajte sledeći šablonski kod:
<!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>
Gornji blok koda definiše oznake za simuliranu web lokaciju vesti. Zatim otvorite datoteku style.css i dodajte sledeći 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: "Written by ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
Gornji blok koda stilizuje web lokaciju u potpunosti koristeći CSS ugnježđeno stilizovanje. Selektor .container deluje kao koren. Možete da referencirate ovaj selektor pomoću & simbola. Kada pokrenete kod u pregledaču, trebalo bi da vidite sledeće:
Da li vam je i dalje potreban CSS preprocesor?
Sa uvođenjem ugnježđenog stilizovanja u izvorni CSS, CSS preprocesori mogu delovati kao nepotrebni. Međutim, ključno je imati na umu da CSS preprocesori nude više od samog ugnježđenog stilizovanja. Oni nude funkcionalnosti kao što su petlje, miksini, funkcije i još mnogo toga. Na kraju, da li ćete koristiti CSS preprocesor ili ne, zavisi od vašeg konkretnog slučaja upotrebe i ličnih preferencija.