Le differenze tra CSS nativo e Sass Nesting

Da quando sono stati lanciati, i CSS hanno ostinatamente rifiutato di supportare una sintassi per annidare i selettori. L'alternativa è sempre stata quella di utilizzare un preprocessore CSS come Sass. Ma oggi la nidificazione fa ufficialmente parte dei CSS nativi. Puoi provare questa funzionalità direttamente nei browser moderni.

Se stai migrando da Sass, dovrai prendere in considerazione eventuali differenze tra la nidificazione nativa e la nidificazione Sass. Esistono alcune differenze fondamentali tra entrambe le funzionalità di annidamento ed esserne consapevoli è fondamentale se stai effettuando il passaggio.

È necessario utilizzare "&" con i selettori di elementi nei CSS nativi

CSS Nesting è ancora una bozza di specifica, con supporto diverso per i browser. Assicurati di controllare siti come caniuse.com per informazioni aggiornate.

Ecco un esempio del tipo di annidamento che vedresti in Sass, usando la sintassi SCSS:

.nav {
ul { display: flex; }
a { color: black; }
}

Questo blocco CSS specifica che qualsiasi elenco non ordinato all'interno di un elemento con a nav la classe si allinea come una colonna flessibile, in un modo disposizione degli elementi HTML sulla pagina. Inoltre, tutti i collegamenti di ancoraggio del testo all'interno degli elementi con a nav la classe dovrebbe essere nera.

Ora, nei CSS nativi, questo tipo di annidamento non sarebbe valido. Per farlo funzionare, dovresti includere il simbolo della e commerciale (&) davanti agli elementi nidificati, in questo modo:

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

La prima versione dell'annidamento CSS non consentiva l'annidamento dei selettori di tipo. Una modifica recente significa che non devi più utilizzare "&", ma le versioni precedenti di Chrome e Safari potrebbero non supportare ancora questa sintassi aggiornata.

Ora, se stavi utilizzando un selettore che inizia con un simbolo (ad esempio il selettore di classe) a indirizzare una parte specifica della pagina, puoi omettere la e commerciale. Quindi la seguente sintassi funzionerebbe sia in CSS nativo che in Sass:

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

Non è possibile creare un nuovo selettore utilizzando "&" nei CSS nativi

Una delle funzionalità che probabilmente apprezzerai di Sass è la possibilità di fare qualcosa del genere:

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

Questo codice Sass viene compilato nel seguente CSS grezzo:

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

Nei CSS nativi, non puoi creare un nuovo selettore utilizzando "&". Il compilatore Sass sostituisce "&" con l'elemento genitore (ad es. .nav), ma i CSS nativi tratteranno "&" e la parte successiva come due selettori separati. Di conseguenza, proverà a creare un selettore composto, che non darà lo stesso risultato.

Questo esempio funzionerà nei CSS nativi, tuttavia:

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

Funziona perché il primo selettore è lo stesso di nav.nav-list in semplici CSS, e il secondo è lo stesso di nav.nav-link. Aggiungere uno spazio tra "&" e il selettore equivarrebbe a scrivere nav .nav-list.

Nei CSS nativi, se usi la e commerciale in questo modo:

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

E' come scrivere questo:

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

Questo potrebbe sorprenderti, considerando che entrambi i file __elenco-nav E __nav-link sono all'interno del .nav selettore. Ma la e commerciale in realtà posiziona gli elementi nidificati davanti all'elemento genitore.

La specificità può essere diversa

Un'altra cosa da notare è l'impatto sulla specificità che non avviene in Sass ma avviene nell'annidamento CSS nativo.

Quindi diciamo che hai a e un elemento. Con il seguente CSS, an in uno di questi elementi utilizzerà un carattere serif:

#main, article {
h2 {
font-family: serif;
 }
}

La versione compilata del codice Sass sopra è la seguente:

#mainh2,
articleh2 {
font-family: serif;
}

Ma la stessa sintassi di nidificazione nei CSS nativi produrrà un risultato diverso, effettivamente lo stesso di:

:is(#main, article) h2 {
font-family: serif;
}

IL È() Il selettore gestisce le regole di specificità in modo leggermente diverso dall'annidamento Sass. Fondamentalmente, la specificità di:È() viene aggiornato automaticamente all'elemento più specifico nell'elenco degli argomenti forniti.

L'ordine degli elementi potrebbe modificare l'elemento selezionato

La nidificazione nei CSS nativi può cambiare completamente il significato effettivo del selettore (ovvero seleziona un elemento completamente diverso).

Consideriamo ad esempio il seguente codice HTML:

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

E il seguente CSS:

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

Questo è il risultato se usi Sass come compilatore CSS:

Ora nel blocco HTML, se dovessi spostare il file con la classe di tema scuro all'interno di quello di chiamare all'azione, romperebbe il selettore (in modalità Sass). Ma quando passi ai CSS normali (ovvero senza preprocessore CSS), gli stili continueranno a funzionare.

Ciò è dovuto al modo in cui :È() funziona sotto il cofano. Quindi il CSS nidificato sopra si compila nel seguente CSS semplice:

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

Questo sta specificando a .intestazione questo è un discendente di entrambi .tema scuro E .chiamare all'azione. Ma l'ordine di questi non ha molta importanza. Finché il .intestazione è il discendente di .chiamare all'azione E .tema scuro, funziona in entrambi gli ordini.

Questo è un caso limite e non qualcosa in cui ti imbatterai spesso. Ma capire il :È() La funzionalità sottostante del selettore può aiutarti a padroneggiare il funzionamento della nidificazione nei CSS. Anche questo fa eseguire il debug del tuo CSS molto più facile.

Scopri come utilizzare Sass in React

Poiché Sass viene compilato in CSS, puoi usarlo praticamente con qualsiasi framework dell'interfaccia utente. Puoi installare il preprocessore CSS nei progetti Vue, Preact, Svelte e, ovviamente, React. Anche il processo di installazione di Sass per tutti questi framework è abbastanza semplice.

Il più grande vantaggio dell'utilizzo di Sass in React è che ti consente di scrivere stili puliti e riutilizzabili utilizzando variabili e mixin. Come sviluppatore React, sapere come usare Sass ti aiuterà a scrivere codice più pulito ed efficiente e a renderti uno sviluppatore complessivamente migliore.