Mobile-first significa escribir tus estilos base para la pantalla más pequeña, y luego agregar complejidad para pantallas más grandes con consultas de medios min-width — en lugar de comenzar en desktop y quitar cosas.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Por qué mobile-first gana: CSS base se mantiene mínimo (mobile obtiene solo lo que necesita — bueno para el rendimiento en dispositivos más débiles), y superpones complejidad, lo cual es más fácil de razonar que anular/quitar. También coincide con cómo el contenido naturalmente refluye de una columna a muchas.
Las media queries responden al viewport — la ventana completa. Pero un componente reutilizable (digamos una tarjeta) puede aparecer en un área principal ancha o una barra lateral estrecha en la misma página. El ancho del viewport no puede decirte cuánto espacio tiene el componente realmente.
.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; }
}
Ahora la misma tarjeta cambia automáticamente a un diseño horizontal cada vez que su contenedor es ≥400px — ya sea porque la pantalla es grande o porque está en una columna ancha. El componente se vuelve verdaderamente independiente del contexto y reutilizable.
Mobile-first mantiene CSS responsivo limpio y mantenible.
Las container queries son un avance importante: permiten que los componentes respondan a su propio espacio disponible, que es exactamente lo que necesitas en una arquitectura basada en componentes (sistemas de diseño, tarjetas/widgets reutilizables) donde el mismo componente aparece en muchos contextos.