Organizzazione dei file: pattern ITCSS e 7-1

Con la crescita dei progetti, un singolo file CSS diventa difficile da gestire. Le strutture di organizzazione dei file aiutano i team a suddividere il CSS in livelli logici, caricati nell'ordine corretto e facili da consultare.

ITCSS organizza il CSS in livelli ordinati secondo una specificità crescente. Come in un triangolo invertito, le regole più ampie e generiche si trovano in alto, mentre quelle più specifiche sono in basso. Questo rispetta la cascata naturale.

I 7 livelli di ITCSS (dal più al meno generico):

1. Settings — Variabili e design token
2. Tools — Mixin e funzioni
3. Generic — Reset/normalizzazione
4. Elements — Stili di base degli elementi HTML
5. Objects — Astrazioni del layout (senza aspetti estetici)
6. Components — Componenti dell'interfaccia
7. Utilities — Sovrascritture e strumenti di supporto; qui è consentito !important

Una struttura tipica dei file ITCSS:

Il pattern 7-1 organizza Sass in 7 cartelle e 1 file principale che importa ogni elemento:

• abstracts/ — variabili, funzioni e mixin
• base/ — reset, tipografia ed elementi di base
• components/ — pulsanti, card e finestre modali
• layout/ — intestazione, piè di pagina, barra laterale e griglia
• pages/ — stili specifici delle pagine
• themes/ — temi multipli
• vendors/ — CSS di terze parti

Un file principale main.scss importa tutti i partial nell'ordine corretto:

Il moderno @layer CSS offre gli stessi vantaggi di ordinamento della cascata di ITCSS senza un preprocessore. I livelli vengono dichiarati una volta e la loro priorità è fissa, indipendentemente dall'ordine nel codice sorgente.

Un'alternativa ai file di stile centralizzati consiste nel co-localizzare il CSS del componente accanto al file del componente. È una pratica comune nei progetti React/Vue che usano CSS Modules o CSS-in-JS.

I file partial di Sass iniziano con un carattere di sottolineatura (_button.scss). Il carattere indica a Sass che il file non deve essere compilato autonomamente, ma deve essere importato in un file principale.

Se non utilizza Sass, PostCSS con il plugin @import oppure @import del CSS nativo insieme a @layer consente di ottenere la stessa organizzazione dei file senza un preprocessore.

Che utilizzi ITCSS, il pattern 7-1 o file co-localizzati, ogni componente dovrebbe avere il proprio file. Assegni al file il nome del componente a cui applica gli stili: _card.scss, button.css, Nav.module.css.

In ITCSS, quale livello si trova all'estremità superiore del triangolo invertito (più ampio e meno specifico)?

ITCSS ordina i livelli CSS dal generico allo specifico seguendo la cascata. Il pattern 7-1 organizza Sass in 7 cartelle importate attraverso un unico file principale. Il moderno @layer CSS offre nativamente lo stesso controllo sulla cascata. Che siano centralizzati o co-localizzati, il principio fondamentale è: un file per componente, con importazioni ordinate in modo coerente.