Tus componentes no deberían depender del viewport ⚠️
Llevamos una década confiando ciegamente en las Media Queries, pero tienen un fallo crítico: solo entienden el tamaño de la ventana del navegador, no el espacio real donde vive el componente. El problema es evidente cua
Artículo
Una lectura sobre tecnología y sistemas digitales, escrita para ir al punto y dejar claras las ideas principales.
Tema principal
desarrollo web
Fuente
dev.to
Puntos clave
- Llevamos una década confiando ciegamente en las Media Queries, pero tienen un fallo crítico: solo entienden el tamaño de la ventana del navegador, no el espacio real donde vive el componente.
- El problema es evidente cuando diseñas un sistema de componentes modular. Una misma tarjeta de producto puede estar en un sidebar estrecho o en el cuerpo principal. Con @media, la tarjeta no sabe dónde está; simplemente
- La solución real es el cambio de paradigma hacia el "Container-First Design", combinando Container Queries y Subgrid.
- Aquí está el núcleo técnico de esta arquitectura:
Bloque 1
Llevamos una década confiando ciegamente en las Media Queries, pero tienen un fallo crítico: solo entienden el tamaño de la ventana del navegador, no el espacio real donde vive el componente.
El problema es evidente cuando diseñas un sistema de componentes modular. Una misma tarjeta de producto puede estar en un sidebar estrecho o en el cuerpo principal. Con @media, la tarjeta no sabe dónde está; simplemente reacciona al ancho de la pantalla, rompiendo la consistencia visual.
Bloque 2
La solución real es el cambio de paradigma hacia el "Container-First Design", combinando Container Queries y Subgrid.
Aquí está el núcleo técnico de esta arquitectura:
Bloque 3
• Container Queries: Permiten que un componente adapte su layout basándose en el tamaño de su contenedor padre. Adiós a los ResizeObserver pesados en JS. • Subgrid: Resuelve el problema de la alineación vertical. Permite que los elementos hijos se alineen a la rejilla del padre, asegurando que los títulos y botones coincidan perfectamente entre tarjetas, sin importar la longitud del texto. • Unidades Relativas (cqw, cqh): Sustituyen a las unidades de viewport, haciendo que el escalado sea proporcional al espacio disponible y no a la pantalla.
Esta combinación elimina la necesidad de clases modificadoras complejas y reduce drásticamente la deuda técnica en el CSS.
Bloque 4
Estamos pasando de páginas responsivas a componentes verdaderamente autónomos y conscientes de su contexto.
¿Siguen usando ResizeObserver o ya migraron la lógica de layout a Container Queries en sus proyectos?