Una delle nostre funzionalità di preprocessore CSS preferite è ora integrata nel linguaggio: le regole di stile di nidificazione.
Prima della nidificazione, ogni selettore doveva essere dichiarato esplicitamente, separatamente l'uno dall'altro. Questo porta a ripetizioni, fogli di stile in blocco e un'esperienza di authoring diffusa.
.nesting {
color: hotpink;
}
.nesting > .is {
color: rebeccapurple;
}
.nesting > .is > .awesome {
color: deeppink;
}
Dopo la nidificazione, è possibile continuare con i selettori e raggruppare le relative regole di stile al suo interno.
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
La nidificazione aiuta gli sviluppatori a ridurre la necessità di ripetere i selettori, co-localizzando al contempo le regole di stile per gli elementi correlati. Inoltre, consente di abbinare gli stili
al codice HTML scelto come target. Se il componente .nesting nell'esempio precedente è stato
rimosso dal progetto, puoi eliminare l'intero gruppo anziché cercare
i file nelle istanze del selettore correlate.
Nesting può aiutarti con: - Organizzazione - Riduzione delle dimensioni dei file - Refactoring
La nidificazione è disponibile da Chrome 112 e può anche essere provata in Safari Technical Preview 162.
Iniziare a utilizzare la nidificazione CSS
Nel resto di questo post,la seguente sandbox demo viene utilizzata per aiutarti a visualizzare le selezioni. In questo stato predefinito, non è selezionato nulla e tutto è visibile. Selezionando le varie forme e dimensioni, puoi esercitarti nella sintassi e vederla in azione.
All'interno del recinto della sabbia ci sono cerchi, triangoli e quadrati. Alcune sono piccole, medie o
grandi. Altre sono blu, rosa o viola. Si trovano tutti all'interno dell'elemento
contenente .demo. Di seguito è riportata un'anteprima degli elementi HTML che sceglierai come target.
<div class="demo">
<div class="sm triangle pink"></div>
<div class="sm triangle blue"></div>
<div class="square blue"></div>
<div class="sm square pink"></div>
<div class="sm square blue"></div>
<div class="circle pink"></div>
…
</div>
Esempi di nidificazione
La nidificazione CSS consente di definire gli stili di un elemento all'interno del contesto di un altro selettore.
.parent {
color: blue;
.child {
color: red;
}
}
In questo esempio, il selettore di classi .child è nidificato all'interno del selettore di classi .parent. Ciò significa che il selettore .child nidificato
si applica solo agli elementi secondari di elementi con una classe .parent.
In alternativa, questo esempio può essere scritto utilizzando il simbolo &, per indicare esplicitamente dove deve essere inserita la classe padre.
.parent {
color: blue;
& .child {
color: red;
}
}
Questi due esempi sono funzionalmente equivalenti e il motivo per cui hai opzioni diventerà più chiaro man mano che verranno analizzati esempi più avanzati in questo articolo.
Selezionare le cerchie
Per questo primo esempio, l'attività consiste nell'aggiungere stili per dissolvere e sfocare solo i cerchi all'interno della demo.
Senza nidificazione, il CSS oggi:
.demo .circle {
opacity: .25;
filter: blur(25px);
}
Con la nidificazione, esistono due modi validi:
/* & is explicitly placed in front of .circle */
.demo {
& .circle {
opacity: .25;
filter: blur(25px);
}
}
o
/* & + " " space is added for you */
.demo {
.circle {
opacity: .25;
filter: blur(25px);
}
}
Risultato: tutti gli elementi all'interno di .demo con una classe .circle risultano
sfocati e quasi invisibili:
Selezione di triangoli e quadrati
Questa attività richiede la selezione di più elementi nidificati, chiamato anche selettore di gruppo.
Senza la nidificazione, oggi CSS esistono due modi:
.demo .triangle,
.demo .square {
opacity: .25;
filter: blur(25px);
}
o utilizzando :is()
/* grouped with :is() */
.demo :is(.triangle, .square) {
opacity: .25;
filter: blur(25px);
}
Con la nidificazione, ecco due modi validi:
.demo {
& .triangle,
& .square {
opacity: .25;
filter: blur(25px);
}
}
o
.demo {
.triangle, .square {
opacity: .25;
filter: blur(25px);
}
}
Risultato, solo .circle elementi rimangono all'interno di .demo:
Selezionare triangoli e cerchi grandi
Questa attività richiede un selettore composto, in cui gli elementi devono avere entrambe le classi per poter essere selezionati.
Senza nidificazione, il CSS oggi:
.demo .lg.triangle,
.demo .lg.square {
opacity: .25;
filter: blur(25px);
}
o
.demo .lg:is(.triangle, .circle) {
opacity: .25;
filter: blur(25px);
}
Con la nidificazione, ecco due modi validi:
.demo {
.lg.triangle,
.lg.circle {
opacity: .25;
filter: blur(25px);
}
}
o
.demo {
.lg {
&.triangle,
&.circle {
opacity: .25;
filter: blur(25px);
}
}
}
Risultato: tutti i triangoli e i cerchi grandi sono nascosti all'interno di .demo:
Suggerimento avanzato con selettori composti e nidificazione
Il simbolo & è il tuo amico in questo caso, perché mostra esplicitamente come unire i selettori nidificati. Considera l'esempio seguente:
.demo {
.lg {
.triangle,
.circle {
opacity: .25;
filter: blur(25px);
}
}
}
Sebbene sia un metodo valido per nidificare, i risultati non corrisponderanno agli elementi previsti.
Il motivo è che senza & non specifichi il risultato desiderato della combinazione di .lg.triangle,
.lg.circle, il risultato effettivo sarebbe .lg .triangle, .lg
.circle; selettori discendenti.
Selezione di tutte le forme tranne quelle rosa
Questa attività richiede una pseudo classe funzionale di negazione, in cui gli elementi non devono avere il selettore specificato.
Senza nidificazione, il CSS oggi:
.demo :not(.pink) {
opacity: .25;
filter: blur(25px);
}
Con la nidificazione, ecco due modi validi:
.demo {
:not(.pink) {
opacity: .25;
filter: blur(25px);
}
}
o
.demo {
& :not(.pink) {
opacity: .25;
filter: blur(25px);
}
}
Risultato: tutte le forme non rosa sono nascoste all'interno di .demo:
Precisione e flessibilità con &
Supponiamo che tu voglia scegliere come target .demo con il selettore :not(). & è obbligatorio per:
.demo {
&:not() {
...
}
}
In questo modo .demo e :not() sono combinati in .demo:not(), a differenza dell'esempio precedente che richiedeva .demo :not(). Questo promemoria è molto importante per
nidificare un'interazione :hover.
.demo {
&:hover {
/* .demo:hover */
}
:hover {
/* .demo :hover */
}
}
Altri esempi di nidificazione
La specifica CSS per la nidificazione è ricca di altri esempi. Se vuoi saperne di più sulla sintassi tramite esempi, troverai un'ampia gamma di esempi validi e non validi.
Nei prossimi esempi verrà presentata brevemente una funzionalità di nidificazione del CSS, per aiutarvi a comprendere l'ampia gamma di funzionalità che introduce.
Nidificare i file @media
Può essere molto distraente passare a un'area diversa del foglio di stile per trovare le condizioni delle query supporti che modificano un selettore e i suoi stili. Questo tipo di distrazione non è più disponibile, grazie alla capacità di nidificare le condizioni direttamente all'interno del contesto.
Per praticità, se la query multimediale nidificata modifica solo gli stili per il contesto del selettore corrente, è possibile utilizzare una sintassi minima.
.card {
font-size: 1rem;
@media (width >= 1024px) {
font-size: 1.25rem;
}
}
Puoi usare esplicitamente & anche:
.card {
font-size: 1rem;
@media (width >= 1024px) {
&.large {
font-size: 1.25rem;
}
}
}
Questo esempio mostra la sintassi espansa con & e ha come target anche .large schede per dimostrare che ulteriori funzionalità di nidificazione continuano a funzionare.
Scopri di più sulla nidificazione di @rules.
Nidificare ovunque
Tutti gli esempi fino a questo punto hanno continuato o aggiunto a un contesto precedente. Puoi modificare completamente o riorganizzare il contesto, se necessario.
.card {
.featured & {
/* .featured .card */
}
}
Il simbolo & rappresenta un riferimento a un oggetto del selettore (non una stringa) e
può essere posizionato ovunque in un selettore nidificato. Può anche essere posizionato
più volte:
.card {
.featured & & & {
/* .featured .card .card .card */
}
}
Sebbene questo esempio sia un po' inutile, in alcuni casi è utile poter ripetere il contesto di un selettore.
Esempi di nidificazione non validi
Alcuni scenari di sintassi di nidificazione non sono validi e potrebbero sorprenderti se hai eseguito la nidificazione nei preprocessori.
Nesting e concatenazione
Molte convenzioni di denominazione delle classi CSS contano che la nidificazione sia in grado di concatenare o aggiungere selettori come se fossero stringhe. Questo non funziona nella nidificazione CSS perché i selettori non sono stringhe, sono riferimenti agli oggetti.
.card {
&--header {
/* is not equal to ".card--header" */
}
}
Puoi trovare una spiegazione più approfondita nelle specifiche.
Esempio di nidificazione ingannevole
Nidificare negli elenchi dei selettori e :is()
Considera il seguente blocco CSS di nidificazione:
.one, #two {
.three {
/* some styles */
}
}
Questo è il primo esempio che inizia con un elenco di selettore e poi continua con la nidificazione. Gli esempi precedenti erano terminati solo con un elenco di selettore. Non c'è nulla di non valido in questo esempio di nidificazione, ma c'è un dettaglio di implementazione potenzialmente difficile sulla nidificazione all'interno degli elenchi di selezione, in particolare quelli che includono un selettore ID.
Affinché la nidificazione funzioni, qualsiasi elenco di selettore che non sia la nidificazione più interna verrà aggregato con :is() dal browser. Questo wrapping mantiene il raggruppamento dell'elenco di selettore all'interno di qualsiasi contesto di creazione. L'effetto collaterale di questo raggruppamento, :is(.one, #two), è che adotta la specificità del punteggio più alto all'interno dei selettori tra parentesi. :is() funziona sempre in questo modo, ma potrebbe sorprendere l'utilizzo della sintassi di nidificazione, perché non è esattamente ciò che è stato creato. Il trucco è riassunto: la nidificazione con ID ed elenchi di selettori può portare a selettori di specificità molto elevati.
Per riassumere chiaramente l'esempio complicato, il blocco di nidificazione precedente verrà applicato al documento come segue:
:is(.one, #two) .three {
/* some styles */
}
Tieni d'occhio o insegna ai tuoi linter ad avvisarti quando esegui il nidificazione all'interno di un elenco di selettore che utilizza un selettore ID. La specificità di tutta la nidificazione all'interno dell'elenco di selettore sarà elevata.
Combinare nidificazione e dichiarazioni
Considera il seguente blocco CSS di nidificazione:
.card {
color: green;
& { color: blue; }
color: red;
}
Il colore degli elementi .card sarà blue.
Le dichiarazioni di stile mescolate vengono mostrate in alto, come se fossero state redatte prima che si verificasse la nidificazione. Puoi trovare ulteriori dettagli nelle specifiche.
Ci sono modi per evitarlo. Qui sotto aggrega i tre stili di colore in &, che mantiene l'ordine a cascata come previsto dall'autore. Il colore degli elementi
.card sarà rosso.
.card {
color: green;
& { color: blue; }
& { color: red; }
}
Anzi, è buona norma aggregare con un & tutti gli stili che seguono la nidificazione.
.card {
color: green;
@media (prefers-color-scheme: dark) {
color: lightgreen;
}
& {
aspect-ratio: 4/3;
}
}
Rilevamento delle caratteristiche
Esistono due ottimi modi per funzionalità di rilevamento della nidificazione CSS: utilizza la nidificazione o utilizza @supports per verificare la capacità di analisi del selettore di nidificazione.
Utilizzo della nidificazione:
html {
.has-nesting {
display: block;
}
.no-nesting {
display: none;
}
}
Utilizzo di @supports:
@supports (selector(&)) {
/* nesting parsing available */
}
Il mio collega Bramus ha un fantastico Codepen che mostra questa strategia.
Debug con Chrome DevTools
Il supporto attuale per la nidificazione in DevTools è minimo. Al momento, gli stili sono rappresentati nel riquadro Stili come previsto, ma il tracciamento della nidificazione e del contesto completo del selettore non è ancora supportato. Il nostro team è progettato e progettato per renderlo trasparente e chiaro.
Chrome 113 prevede di supportare ulteriore supporto per la nidificazione dei CSS. Non perderti gli aggiornamenti.
Il futuro
Nesting CSS è disponibile solo nella versione 1. La versione 2 introdurrà una maggiore quantità di zuccheri sintattici e potenzialmente meno regole da memorizzare. Anche l'analisi della nidificazione potrebbe non essere limitata o presentare momenti difficili.
La nidificazione rappresenta un grande miglioramento del linguaggio CSS. Questo ha implicazioni in termini di creazione di quasi tutti gli aspetti architettonici di CSS. Questo grande impatto deve essere analizzato e compreso a fondo prima di poter specificare la versione 2.
Come ultimo pensiero, ecco una demo
che utilizza @scope, nidificazione e @layer tutti insieme. È tutto molto emozionante!
