Imbricarea CSS nativă vă poate simplifica codul CSS și vă poate îmbunătăți experiența generală de codare.
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ă”.
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.
Stilul imbricat: The Old Way
Stilul imbricat este o caracteristică disponibilă în multe Preprocesoare CSS precum Sass, Stylus și mai puțin CSS. Deși sintaxa poate diferi între acești preprocesoare, conceptul de bază rămâne consecvent. Dacă ai vrut să stilizezi toate
h1 elemente din a div cu numele clasei de recipient, în CSS obișnuit, ați scrie:.container {
background-color: #f2f2f2;
}
.containerh1 {
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:
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>
În blocul de cod de mai sus, div-ul cu numele clasei recipient are o culoare de fundal roșie. Stilul pentru h1 elementul se află în .container bloc. Acest h1 elementul 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 la recipient div, dar h1 nu are stilul potrivit.
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 (&) după cum este ilustrat mai jos:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
În blocul de cod de mai sus, & acționează ca referință la selectorul părinte. Punând semnul și înainte de h1 elementul ar trebui să informeze browserul că vizați toți copiii h1 elemente de pe recipient div. Când rulați codul în browser, ar trebui să vedeți următoarele:
De cand & 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:"Hereisapseudoelement.";
}
}
Î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, acesta determină culoarea p element bazat pe lățimea 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ă cuibărești 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 ce ați învățat până acum construirea unui site web simplu și valorificarea caracteristicii de stil imbricate în CSS. Creați un folder și denumiți-l cum doriți. În acel folder, creați un index.htm si a stil.css fişier.
În index.htm fișier, adăugați următorul cod boilerplate:
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>
Blocul de cod de mai sus definește marcajul pentru un site de știri simulat. Apoi, deschideți stil.css fișier ș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: "Writtenby ";
}&: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. The .container selectorul acționează ca adâncimea rădăcinii. Puteți face referire la acest selector utilizând & simbol. 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.