Mobile-first înseamnă că-ți scrii stilurile de bază pentru ecranul cel mai mic, apoi adaugi complexitate pentru ecrane mai mari folosind media queries cu min-width — mai degrabă decât să începi de la desktop și să elimini lucruri.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
De ce mobile-first câștigă: CSS-ul de bază rămâne minimal (mobile-ul obține doar ceea ce-i trebuie — bun pentru performanță pe dispozitive mai slabe), și stratifici complexitate, ceea ce este mai ușor de gândit decât să o înlocuiești/elimini. De asemenea, se potrivește cu modul în care conținutul se reflectă natural dintr-o coloană în mai multe.
Media queries răspund la viewport — întreaga fereastră. Dar o componentă reutilizabilă (să zicem o card) ar putea apărea într-o zonă principală lată sau într-o bară laterală îngustă pe aceeași pagină. Lățimea viewport-ului nu-ți poate spune câtă spațiu are de fapt componenta.
.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; }
}
Acum aceeași card comută automat la o aspect orizontal ori de câte ori containerul acesteia este ≥400px — indiferent dacă este pentru că ecranul este mare sau pentru că se află într-o coloană lată. Componenta devine cu adevărat independentă de context și reutilizabilă.
Mobile-first ține CSS responsiv lean și ușor de întreținut.
Container queries sunt un progres major: permit componentelor să răspundă la spațiul disponibil propriu, care este exact ceea ce-ți trebuie într-o arhitectură bazată pe componente (sisteme de design, card-uri/widget-uri reutilizabile) unde aceeași componentă se găsește în multe contexte.