Mobile-first significa scrivere gli stili base per lo schermo più piccolo, poi aggiungere complessità per schermi più grandi con media query min-width — piuttosto che iniziare da desktop e rimuovere cose.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Perché mobile-first vince: il CSS base rimane minimo (i dispositivi mobile ricevono solo ciò di cui hanno bisogno — buono per le prestazioni su dispositivi più deboli), e si aggiunge complessità, che è più facile da ragionare che sovrascriverla/rimuoverla. Inoltre corrisponde a come il contenuto naturalmente si ridispone da una colonna a molte.
I media query rispondono al viewport — l'intera finestra. Ma un componente riutilizzabile (ad esempio una card) potrebbe apparire in un'area principale larga o in una barra laterale stretta sulla stessa pagina. La larghezza del viewport non può dirvi quanto spazio il componente ha effettivamente a disposizione.
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
Ora la stessa card passa automaticamente a un layout orizzontale ogni volta che il suo container è ≥400px — che sia perché lo schermo è grande o perché si trova in una colonna larga. Il componente diventa veramente context-independent e riutilizzabile.
Mobile-first mantiene il CSS responsive snello e manutenibile.
Le container query sono un progresso significativo: permettono ai componenti di rispondere allo spazio disponibile proprio, che è esattamente quello di cui hai bisogno in un'architettura basata su componenti (design system, card/widget riutilizzabili) dove lo stesso componente finisce in molti contesti.