Din punct de vedere istoric, CSS a fost un limbaj dificil de lucrat. Preprocesoarele CSS au facilitat lucrul cu CSS și au oferit, de asemenea, funcții suplimentare, cum ar fi bucle, mixuri și multe altele. De-a lungul anilor, CSS a devenit mai capabil și a adoptat unele dintre caracteristicile introduse inițial de preprocesoarele CSS. O astfel de caracteristică este „stilizarea imbricată”.
VIDEO MUO AL ZILEI
DEfilați PENTRU A CONTINUA CU CONȚINUT
Stilul imbricat permite dezvoltatorilor să imbricați regulile CSS unul în celălalt, reflectând structura HTML. Acest lucru are ca rezultat un cod mai organizat și mai ușor de citit, deoarece relația dintre elementele HTML și stilurile lor corespunzătoare este vizibilă vizual.
Cuprins
Stilul imbricat: The Old Way
Stilul imbricat este o caracteristică disponibilă în multe preprocesoare CSS, cum ar fi Sass, Stylus și Less CSS. Deși sintaxa poate diferi între acești preprocesoare, conceptul de bază rămâne consecvent. Dacă doriți să stilați toate elementele h1 dintr-un div cu numele clasei containerului, în CSS obișnuit, ați scrie:
.container {
background-color: #f2f2f2;
}.container h1 {
font-size: 44px;
}
Într-un preprocesor CSS precum Less CSS, implementați stilul imbricat astfel:
.container{
background-color: #f2f2f2; h1 {
font-size:44px;
}
}
Blocul de cod de mai sus obține aceleași rezultate ca implementarea CSS obișnuită, dar face ușor pentru orice dezvoltator care citește codul să înțeleagă ce se întâmplă. Acest sentiment de „ierarhie” a fost unul dintre cele mai mari puncte de vânzare ale preprocesoarelor CSS.
Arborele de cuibărit poate fi imbricat la orice adâncime fără limitări, dar este esențial să fii precaut, deoarece imbricarea excesiv de adâncă poate duce la verbozitatea codului.
Stil nativ imbricat în CSS
Nu toate browserele includ suport pentru stilul imbricat nativ. The Pot folosi… site-ul web vă poate ajuta să verificați dacă browserul dvs. țintă acceptă această funcție.
Stilul nativ imbricat în CSS funcționează similar cu preprocesoarele CSS, ceea ce înseamnă că este posibil să imbricați orice selector în altul. Dar există o diferență cheie pe care ar trebui să o rețineți. Aruncă o privire la blocul de cod de mai jos:
<!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>
În blocul de cod de mai sus, div-ul cu containerul numelui clasei are o culoare roșie de fundal. Stilul pentru elementul h1 se află în blocul .container. Acest element h1 are culoarea galbenă. Când rulați acest cod în browser, este posibil să observați ceva în neregulă. Browserul aplică corect o culoare roșie de fundal pentru div-ul containerului, dar h1 nu are stilul adecvat.
Acest lucru se datorează faptului că stilul imbricat funcționează puțin diferit în CSS în comparație cu preprocesoarele CSS precum Less. Nu puteți face referire directă la un element HTML într-un arbore imbricat. Pentru a remedia acest lucru, trebuie să utilizați un ampersand (&) așa cum este ilustrat mai jos:
.container {
background-color: red; & h1 {
color: yellow;
}
}
În blocul de cod de mai sus, & acționează ca o referință la selectorul părinte. Punerea semnului și înainte de elementul h1 ar trebui să informeze browserul că vizați toate elementele h1 secundare din containerul div. Când rulați codul în browser, ar trebui să vedeți următoarele:
Deoarece & este simbolul folosit pentru a face referire la un element părinte, este foarte posibil să vizați pseudo-clasele și pseudo-elementele unui element astfel:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Înainte de implementarea stilului imbricat CSS, dacă ați urmărit să aplicați stiluri condiționat, în funcție de lățimea browserului, trebuia să apelați la o metodă ca următoarea:
p {
color:black;
}@media (min-width:750px) {
p {
color:gray;
}
}
Când browserul redă pagina, determină culoarea elementului p pe baza lățimii browserului. Dacă lățimea browserului depășește 750px, acesta folosește culoarea gri; în caz contrar, aplică culoarea implicită (negru).
Această implementare funcționează bine, dar după cum vă puteți imagina, lucrurile pot deveni destul de verbose rapid, mai ales atunci când trebuie să aplicați diferite stiluri pe baza anumitor reguli. Acum este posibil să imbricați interogări media direct în blocul de stil al unui element.
p {
color:black; @media (min-width:750px) {
color:gray;
}
}
Acest bloc de cod face practic același lucru ca cel anterior, dar are avantajul de a fi ușor de înțeles. Privind doar interogarea media și elementul părinte de imbricare, puteți spune cum va aplica browserul stilurile adecvate atunci când sunt îndeplinite condițiile definite.
Stilizarea unui site web cu stiluri imbricate CSS
Este timpul să puneți în practică tot ceea ce ați învățat până acum, construind un site web simplu și valorificând caracteristica de stil imbricată în CSS. Creați un folder și denumiți-l cum doriți. În acel folder, creați un fișier index.htm și un fișier style.css.
În fișierul index.htm, adăugați următorul cod boilerplate:
<!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>
Blocul de cod de mai sus definește marcajul pentru un site de știri simulat. Apoi, deschideți fișierul style.css și adăugați următorul cod:
.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;
}
}
Blocul de cod de mai sus stilează site-ul în întregime cu stiluri imbricate CSS. Selectorul .container acţionează ca adâncimea rădăcinii. Puteți face referire la acest selector folosind simbolul &. Când rulați codul în browser, ar trebui să vedeți următoarele:
Mai aveți nevoie de un preprocesor CSS?
Odată cu introducerea stilurilor imbricate în CSS nativ, preprocesoarele CSS ar putea părea a fi inutile. Cu toate acestea, este esențial să rețineți că preprocesoarele CSS oferă mai mult decât un stil imbricat. Ele oferă caracteristici precum bucle, mixuri, funcții și multe altele. În cele din urmă, dacă să utilizați sau nu un preprocesor CSS depinde de cazul dvs. de utilizare specific și de preferințele personale.