CSS

Distancia entre componentes en un sistema de diseño trucos CSS

di que tienes <Card /> Es muy probable que no choque con otros componentes sin una distancia a su alrededor. Esto es cierto para… casi todos los componentes. Entonces, ¿cómo maneja la distancia entre los componentes en un sistema de diseño?

¿Aplica una distancia usando un cuadro directamente en <Card />Quizás margin-block-end: 1rem; margin-inline-end: 1rem; entonces, ¿alejarse de ambos lados donde fluye más contenido de forma natural? Eso es un poco arrogante. Tal vez las cartas son niños por dentro <Grid /> componente y la red se aplica un gap: 1remEsto es tan inconveniente como lo es ahora. <Card /> la distancia entre los componentes entrará en conflicto con <Grid /> distancia entre los componentes, que muy probablemente no sea lo que desea, sin mencionar que la cantidad de espacio está codificada firmemente.

Agregue espacio al inicio integrado y al final del bloque de un componente de mapa.

Diferentes puntos de vista sobre la distancia entre los componentes.

eric bailey Me metí en esto recientemente y miré algunas opciones:

  • Podrías apostar una distancia en cada componente y tratar de ser lo más inteligente posible al respecto. (Pero eso es bastante limitante).
  • Puede transferir la distancia entre los componentes, por ejemplo <Card space="xxl" />. (Este puede ser un buen enfoque, probablemente necesite más de un apoyo, tal vez incluso uno para cada dirección, lo cual es bastante prolijo).
  • No puede usar espacio entre los componentes y crear algo como un <Spacer /> o <Layout /> componente específicamente para la distancia entre los componentes. (Desglosa bien los componentes, pero también puede ser prolijo y agregar peso innecesario al DOM).

Esta conversación tiene una amplia gama de perspectivas, algunas tan extremas como dice Max Stoiber. simplemente nunca use margin alguna vez. Es un poco dogmático para mí, pero me gusta que esté tratando de repensar las cosas. Me gusta la idea de separar el trabajo en la distancia y el diseño de los componentes en sí, como que estos componentes de contenido no deberían estar completamente interesados ​​en dónde se usan y dejar que el diseño se realice en un nivel superior a ellos.

Adán Argyle predicho hace varios años que el uso de margin en CSS disminuirá a medida que el uso de gap Probablemente tenga razón en eso, especialmente ahora que Flexbox lo tiene. gap y que los desarrolladores tienen apetito por estos datos para usar CSS Flexbox y Grid en casi cualquier cosa, tanto a nivel macro como micro.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba