CSS: gap come alternativa a margin

Nel marzo del 2020 lo sviluppatore Max Stoiber pubblicò un post intitolato "Margin considered harmful" nel quale dichiarava che la proprietà margin di CSS sarebbe dovuta essere bannata da qualsiasi componente di una pagina Web. Ora, a qualche anno di distanza, sembrerebbe che il suo appello sia stato accolto. A conferma di ciò vi sarebbero le statistiche relative alla funzionalità più, e meno, utilizzate del linguaggio.

Perché bannare margin dal proprio CSS?

Nell'articolo di Stoiber viene sottolineato come l'uso di margin determini una rottura dell'incapsulamento dei componenti. Un approccio più corretto prevede invece che le caratteristiche di un componente non debbano influenzare nulla che non si trovi al suo interno. A ciò si aggiunge il fatto che un componente ben costruito dovrebbe essere riutilizzabile in qualsiasi layout o contesto. Al contrario margin renderebbe difficile il suo riutilizzo.

Come sostiene il Web Designer Chris Coyier in un suo recente articolo, quando applicato ad un componente margin deve essere considerato unicamente come un modo di allontanare gli altri elementi. Apparentemente ciò non dovrebbe rappresentare un problema, ma impedisce agli altri componenti di capire in quale contesto verranno utilizzati.

Per questo motivo Coyier sposa la previsione formulata dal collega Adam Argyle nel dicembre del 2019. Secondo cui l'uso di margin sarebbe andato incontro ad un naturale declino, favorendo l'uso della proprietà gap.

Entrano quindi in gioco le statistiche del Chrome Platform Status che testimonierebbero come effettivamente l'uso di margin sia in diminuzione. Nello specifico essa sarebbe ancora molto diffusa nei siti Web ma meno impiegata internamente ad essi e nel loro complesso.

Perché utilizzare gap

Ma perché scegliere gap come alternativa a margin? Perché esso definisce la misura del "vuoto" (o se preferite del divario o dell'intervallo) tra le righe e tra le colonne in flexbox, grid o layout multicolonna:

.grid-container {
  gap: 100px;
}

Ciò la rende una proprietà che permette di tenere conto sia del contesto che del layout. Non a caso Argyle la considerava una valida alternativa anche in sostituzione di padding.