Pensar en comportamientos, no en tamaños de pantalla

Chase McCoy escribió una publicación ingeniosa sobre el “problema de las brechas” al hacer una cuadrícula de elementos. Su argumento podría resumirse así: ¿cómo deberíamos espaciar los elementos con márgenes en CSS? Señala que la gappropiedad no está lista para el horario de máxima audiencia cuando se trata de usarla con flexbox, como esto:

.grid {  display: flex;  gap: 10px;} 

En este momento, el uso gapcon flexbox solo es compatible con Firefox y ya me sorprendió olvidándome de eso en algunos proyectos. Así que ten cuidado con eso.

De todos modos, la parte de la publicación del blog de Chase que me encanta es donde menciona la técnica de Andy Bell para crear un diseño responsivo sin consultas de medios, como este:

.grid {  display: grid;  grid-gap: 10px;  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}

Este CSS está haciendo lo siguiente:

• Haga una cuadrícula con un espacio de 10 píxeles entre cada columna y fila.
• Cada columna debe tener un ancho mínimo (150 px).
• Cada columna también debe tener el mismo ancho (1fr).
• La cuadrícula debe autocompletar tantas columnas como pueda.

Lo ingenioso de todo esto es que nuestra cuadrícula ahora responde de manera efectiva debido a que minmax: si cambia el tamaño del navegador, la cuadrícula se dividirá en menos columnas, como esta:

¡Sin consultas de los medios en absoluto! Aunque claro, hay algunas otras formas en las que puedes hacer que esto funcione, pero creo que esto es interesante no solo porque evitamos las consultas de los medios, sino porque nos enseña a pensar de una manera nueva al diseñar y construir componentes.

Chase continúa:

Con esta técnica, en lugar de utilizar puntos de interrupción para especificar el tamaño de pantalla donde deben apilarse los elementos, se especifica el tamaño mínimo que debe tener un elemento antes de apilarse. Me gusta esto porque anima a los desarrolladores a pensar en el diseño responsivo en términos de comportamientos en lugar de tamaños de pantalla.

¡“Comportamientos en lugar de tamaños de pantalla” es una excelente manera de pensar en el diseño de componentes! Muchos de los problemas que he encontrado al crear componentes para un sistema de diseño se deben a que he estado pensando en los tamaños de pantalla (móvil, tableta, computadora de escritorio, etc.) y tratando de hacer que esos componentes se ajusten a esas limitaciones.

Pensar en comportamientos siempre es más efectivo porque hay muchas cosas que pueden afectar un componente más allá del ancho de pantalla o dispositivo con el que estamos trabajando. Quizás queramos que ese componente encaje dentro de otro componente. O queremos alinear algún texto de ayuda a un lado para compararlo.

De cualquier manera, pensar en comportamientos en lugar de tamaños de pantalla no será completamente posible hasta que tengamos consultas de contenedor, como escribe Chris:

Las consultas de contenedores siempre están en la parte superior de la lista de mejoras solicitadas para CSS. La sensación general es que si tuviéramos consultas de contenedor, no escribiríamos tantas consultas de medios globales según el tamaño de la página. Esto se debe a que en realidad estamos tratando de controlar un contenedor de mayor alcance, y la única razón por la que usamos consultas de medios para eso ahora es porque es la mejor herramienta que tenemos en CSS. Lo creo absolutamente.