Mobile-first significa escrever seus estilos base para a menor tela, depois adicionar complexidade para telas maiores com media queries min-width — em vez de começar no desktop e remover coisas.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Por que mobile-first vence: o CSS base fica mínimo (mobile recebe apenas o que precisa — bom para desempenho em dispositivos mais fracos), e você adiciona em camadas a complexidade, o que é mais fácil de raciocinar do que sobrescrever/remover. Também corresponde a como o conteúdo flui naturalmente de uma coluna para muitas.
Media queries respondem ao viewport — a janela inteira. Mas um componente reutilizável (digamos um card) pode aparecer em uma área principal larga ou em uma barra lateral estreita na mesma página. A largura do viewport não pode dizer quanto espaço o componente realmente tem.
.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; }
}
Agora o mesmo card automaticamente muda para um layout horizontal sempre que seu container é ≥400px — seja porque a tela é grande ou porque está em uma coluna larga. O componente se torna verdadeiramente independente de contexto e reutilizável.
Mobile-first mantém CSS responsivo enxuto e mantível.
Container queries são um avanço importante: permitem que componentes respondam ao seu próprio espaço disponível, que é exatamente o que você precisa em uma arquitetura baseada em componentes (design systems, cards/widgets reutilizáveis) onde o mesmo componente aparece em muitos contextos.