L'annidamento CSS nativo può semplificare il codice CSS e migliorare l'esperienza complessiva di codifica.

Storicamente, i CSS sono stati un linguaggio difficile con cui lavorare. I preprocessori CSS hanno reso più facile lavorare con i CSS e hanno anche fornito funzionalità aggiuntive come loop, mixin e altro. Nel corso degli anni, i CSS sono diventati più capaci e hanno adottato alcune delle funzionalità originariamente introdotte dai preprocessori CSS. Una di queste caratteristiche è lo "stile nidificato".

Lo stile nidificato consente agli sviluppatori di nidificare le regole CSS l'una nell'altra, riflettendo la struttura HTML. Ciò si traduce in un codice più organizzato e leggibile, poiché la relazione tra gli elementi HTML e i loro stili corrispondenti è visivamente evidente.

Stile nidificato: alla vecchia maniera

Nested Styling è una funzionalità disponibile in molti Preprocessori CSS come Sass, stilo e meno CSS. Sebbene la sintassi possa differire tra questi preprocessori, il concetto sottostante rimane coerente. Se volevi modellare tutto il

instagram viewer
h1 elementi in a div con il nome della classe di contenitore, in un normale CSS, dovresti scrivere:

.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}

In un preprocessore CSS come Less CSS, implementi uno stile nidificato come questo:

.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
 }
}

Il blocco di codice sopra raggiunge gli stessi risultati della normale implementazione CSS, ma rende facile per qualsiasi sviluppatore che legge il codice capire cosa sta succedendo. Questo senso di "gerarchia" era uno dei maggiori punti di forza dei preprocessori CSS.

L'albero di annidamento può essere annidato a qualsiasi profondità senza limitazioni, ma è essenziale essere cauti, poiché un annidamento eccessivamente profondo può portare a verbosità del codice.

Stile nidificato nativo in CSS

Non tutti i browser includono il supporto per lo stile nidificato nativo. IL Posso usare... sito Web può aiutarti a verificare se il tuo browser di destinazione supporta questa funzione.

Lo stile nidificato nativo nei CSS funziona in modo simile ai preprocessori CSS, il che significa che è possibile nidificare qualsiasi selettore all'interno di un altro. Ma c'è una differenza fondamentale che dovresti notare. Dai un'occhiata al blocco di codice qui sotto:

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>

Nel blocco di codice sopra, il div con il nome della classe contenitore ha un colore di sfondo rosso. Lo stile per il h1 elemento risiede nel .contenitore bloccare. Questo h1 elemento ha il colore giallo. Quando esegui questo codice nel browser, potresti notare qualcosa di sbagliato. Il browser applica correttamente un colore di sfondo rosso al file contenitore div, ma il h1 non ha lo stile appropriato.

Questo perché lo stile nidificato funziona in modo leggermente diverso nei CSS rispetto ai preprocessori CSS come Less. Non è possibile fare direttamente riferimento a un elemento HTML in un albero nidificato. Per risolvere questo problema, è necessario utilizzare una e commerciale (&) come illustrato di seguito:

.container {
background-color: red;
 & h1 {
color: yellow;
 }
}

Nel blocco di codice sopra, & funge da riferimento al selettore padre. Mettere la e commerciale prima del h1 dovrebbe far sapere al browser che stai prendendo di mira tutto il bambino h1 elementi sul contenitore div. Quando esegui il codice nel browser, dovresti vedere quanto segue:

Da & è il simbolo utilizzato per fare riferimento a un elemento genitore, è del tutto possibile prendere di mira le pseudo-classi e gli pseudo-elementi di un elemento in questo modo:

.parent1{
 &:hover{
background-color: red;
 }
 &::before{
content:"Hereisapseudoelement.";
 }
}

Prima dell'implementazione dello stile nidificato CSS, se si mirava ad applicare gli stili in modo condizionale, a seconda della larghezza del browser, si doveva ricorrere a un metodo come il seguente:

p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
 }
}

Quando il browser esegue il rendering della pagina, determina il colore del file P elemento in base alla larghezza del browser. Se la larghezza del browser supera i 750px, utilizza il colore grigio; in caso contrario, applica il colore predefinito (nero).

Questa implementazione funziona bene, ma come puoi immaginare, le cose possono diventare piuttosto prolisse rapidamente, specialmente quando devi applicare stili diversi basati su determinate regole. Ora è possibile nidificare interrogazioni multimediali direttamente nel blocco di stile di un elemento.

p {
color:black;
@media (min-width:750px) {
color:gray;
 }
}

Questo blocco di codice fa fondamentalmente la stessa cosa del precedente, ma ha il vantaggio di essere facile da capire. Osservando semplicemente la media query e l'elemento genitore nidificato, puoi dire come il browser applicherà gli stili appropriati quando le condizioni definite sono soddisfatte.

Stile di un sito Web con stili nidificati CSS

È tempo di mettere in pratica tutto ciò che hai imparato finora costruire un semplice sito web e sfruttando la funzionalità di stile nidificata in CSS. Crea una cartella e chiamala come preferisci. In quella cartella, crea un file indice.htm e un style.css file.

Nel indice.htm file, aggiungere il seguente codice 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>

Il blocco di codice sopra definisce il markup per un sito Web di notizie fittizie. Quindi, apri il file style.css file e aggiungere il seguente codice:

.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;
 }
}

Il blocco di codice sopra stilizza il sito Web interamente con uno stile nidificato CSS. IL .contenitore selettore funge da profondità radice. Puoi fare riferimento a questo selettore usando il & simbolo. Quando esegui il codice nel browser, dovresti vedere quanto segue:

Hai ancora bisogno di un preprocessore CSS?

Con l'introduzione degli stili nidificati nei CSS nativi, i preprocessori CSS potrebbero sembrare non necessari. Tuttavia, è fondamentale tenere presente che i preprocessori CSS offrono più di un semplice stile nidificato. Forniscono funzionalità come loop, mixin, funzioni e altro. In definitiva, se utilizzare o meno un preprocessore CSS dipende dal caso d'uso specifico e dalle preferenze personali.