Nidificazione dei CSS

Una delle nostre funzionalità preferite del preprocessore CSS è ora integrata nel linguaggio: le regole di stile nidificate.

Adam Argyle

Prima della nidificazione, ogni selettore doveva essere dichiarato esplicitamente, separatamente l'uno dall'altro. Ciò comporta ripetizione, dimensioni eccessive dei fogli di stile e un'esperienza di creazione frammentata.

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Dopo l'nidificazione, i selettori possono essere proseguiti e le relative regole di stile possono essere raggruppate al loro interno.

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Prova questa operazione nel browser.

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, può contribuire ad abbinare gli stili all'HTML di destinazione. Se il componente .nesting nell'esempio precedente è stato rimosso dal progetto, puoi eliminare l'intero gruppo anziché cercare nei file le istanze di selettori correlate.

L'organizzazione può essere utile per: - Organizzazione - Riduzione delle dimensioni dei file - Refactoring

La nidificazione è disponibile da Chrome 112 e può anche essere provata in Safari Technical Preview 162.

Introduzione all'organizzazione gerarchica 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 della sandbox sono presenti cerchi, triangoli e quadrati. Alcune sono piccole, medie o grandi. Altre sono blu, rosa o viola. Sono 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

L'annidamento CSS consente di definire gli stili per un elemento nel contesto di un altro selettore.

.parent {
  color: blue;

  .child {
    color: red;
  }
}

In questo esempio, il selettore di classe .child è nidificato all'interno del selettore di classe .parent. Ciò significa che il selettore .child nidificato verrà applicato 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 posizionata la classe principale.

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

Selezione dei cerchi

Per questo primo esempio, l'attività consiste nell'aggiungere stili per attenuare e sfocare solo i cerchi all'interno della demo.

Senza nidificazione, il CSS oggi:

.demo .circle {
  opacity: .25;
  filter: blur(25px);
}

Con il 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:

Seleziona triangoli e quadrati

Questa operazione richiede la selezione di più elementi nidificati, chiamati anche selettori di gruppo.

Senza nidificazione, oggi CSS esistono due modi:

.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}

oppure utilizzando :is()

/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

Con il 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 il 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 sui selettori composti e sul nidificazione

Il simbolo & è il tuo migliore amico in questo caso, in quanto mostra esplicitamente come unire i selettori nidificati. Considera l'esempio seguente:

.demo {
  .lg {
    .triangle,
    .circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

Sebbene sia un modo valido per nidificare, i risultati non corrisponderanno agli elementi che potresti aspettarti. Il motivo è che, senza & per specificare il risultato desiderato di .lg.triangle, .lg.circle combinato, il risultato effettivo sarebbe .lg .triangle, .lg .circle; selettori discendenti.

Seleziona 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 il nidificazione, ecco due modi validi:

.demo {
  :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

o

.demo {
  & :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

Il 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() {
    ...
  }
}

Questo combina .demo e :not() in .demo:not(), diversamente dall'esempio precedente che richiedeva .demo :not(). Questo promemoria è molto importante se vuoi nidificare un'interazione :hover.

.demo {
  &:hover {
    /* .demo:hover */
  }

  :hover {
    /* .demo :hover */
  }
}

Altri esempi di nidificazione

La specifica CSS per l'annidamento è ricca di altri esempi. Se vuoi saperne di più sulla sintassi tramite esempi, consulta questa pagina, che copre una vasta gamma di esempi validi e non validi.

Gli esempi che seguono introdurranno brevemente una funzionalità di nidificazione CSS per aiutarti a comprendere l'ampiezza delle funzionalità che introduce.

Annidamento di @media

Può essere molto distratto passare a un'altra area dello stile per trovare condizioni di query sui contenuti multimediali che modificano un selettore e i relativi stili. Questa distrazione è stata eliminata grazie alla possibilità di nidificare le condizioni direttamente all'interno del contesto.

Per comodità sintattica, se la query sui contenuti multimediali 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 &, pur scegliendo come target .large schede per dimostrare che ulteriori funzionalità di nidificazione continuano a funzionare.

Scopri di più sull'nidificazione di @rules.

Nidificazione ovunque

Tutti gli esempi fino a questo punto sono stati continuati o aggiunti a un contesto precedente. Se necessario, puoi modificare o riorganizzare completamente il contesto.

.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 inserito più volte:

.card {
  .featured & & & {
    /* .featured .card .card .card */
  }
}

Sebbene questo esempio possa sembrare un po' inutile, esistono sicuramente scenari in cui la possibilità di ripetere un contesto del selettore è utile.

Esempi di nidificazione non validi

Alcuni scenari di sintassi di nidificazione non sono validi e potrebbero sorprenderti se hai eseguito la nidificazione nei preprocessori.

Nidificazione e concatenazione

Molte convenzioni di denominazione delle classi CSS si basano sul fatto che l'organizzazione gerarchica possa concatenare o aggiungere i selettori come se fossero stringhe. Questo non funziona nell'annidamento CSS perché i selettori non sono stringhe, ma riferimenti a oggetti.

.card {
  &--header {
    /* is not equal to ".card--header" */
  }
}

Puoi trovare una spiegazione più approfondita nelle specifiche.

Esempio di nidificazione complessa

Nidificazione all'interno di elenchi di selettori e :is()

Prendi in considerazione il seguente blocco CSS nidificato:

.one, #two {
  .three {
    /* some styles */
  }
}

Questo è il primo esempio che inizia con un elenco di selettori e poi continua a nidificarsi ulteriormente. Gli esempi precedenti terminavano solo con un elenco di selettori. Questo esempio di nidificazione non contiene elementi non validi, ma presenta un dettaglio di implementazione potenzialmente complicato relativo alla nidificazione all'interno di elenchi di selettori, 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 a capo mantiene il raggruppamento dell'elenco di selettori in tutti i contesti creati. L'effetto collaterale di questo raggruppamento, :is(.one, #two), è che adotta la specificità del punteggio più alto all'interno dei selettori tra parentesi. Questo è il modo in cui :is() funziona sempre, ma potrebbe sorprenderti quando utilizzi la sintassi di nidificazione perché non è esattamente ciò che è stato creato. Il trucco riepilogato: l'annidamento con ID ed elenchi di selettori può portare a selettori di specificità molto elevata.

Per riepilogare chiaramente l'esempio complicato, il blocco nidificato precedente verrà applicato al documento come segue:

:is(.one, #two) .three {
  /* some styles */
}

Tieni d'occhio o insegna ai tuoi linter ad avvisare 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.

Combinazione di nidificazione e dichiarazioni

Considera il seguente blocco CSS di nidificazione:

.card {
  color: green;
  & { color: blue; }
  color: red;
}

Il colore degli elementi .card sarà blue.

Eventuali dichiarazioni di stile mescolate vengono sollevate in alto, come se fossero state create prima di qualsiasi nidificazione. Puoi trovare ulteriori dettagli nella specifica.

Esistono dei modi per aggirare il problema. Il codice seguente inserisce i tre stili di colore in &, mantenendo l'ordine di applicazione in cascata come previsto dall'autore. Il colore degli elementi .card sarà rosso.

.card {
  color: green;
  & { color: blue; }
  & { color: red; }
}

In effetti, è buona norma racchiudere tutti gli stili che seguono l'annidamento con un &.

.card {
  color: green;

  @media (prefers-color-scheme: dark) {
    color: lightgreen;
  }

  & {
    aspect-ratio: 4/3;
  }
}

Rilevamento di funzionalità

Esistono due ottimi modi per rilevare il nidificazione del CSS: utilizza la nidificazione o @supports per verificare la possibilità di analizzare i selettori nidificati.

Utilizzo del nesting:

html {
  .has-nesting {
    display: block;
  }

  .no-nesting {
    display: none;
  }
}

Utilizzo di @supports:

@supports (selector(&)) {
  /* nesting parsing available */
}

Il mio collega Bramus ha un ottimo 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 monitoraggio del nidificazione e il relativo contesto completo del selettore non sono ancora supportati. Il nostro team è progettato e progettato per renderlo trasparente e chiaro.

Chrome 113 dovrebbe avere un supporto aggiuntivo per il nidificazione CSS. Non perderti gli aggiornamenti.

Il futuro

Nidificazione CSS è disponibile solo nella versione 1. La versione 2 introdurrà più sintassi e potenzialmente meno regole da memorizzare. L'analisi della nidificazione potrebbe non essere limitata o presentare momenti difficili.

La nidificazione è un grande miglioramento del linguaggio CSS. Ha implicazioni per la creazione in quasi tutti gli aspetti dell'architettura del CSS. Questo grande impatto deve essere analizzato e compreso a fondo prima di poter specificare la versione 2.

Per concludere, ecco una demo che utilizza @scope, il nidificazione e @layer tutti insieme. È tutto molto emozionante.