Component Spacing in a Design System

Consider a <card></card> component. It shouldn't be directly adjacent to other components without spacing. This applies to almost every component. So, how should component spacing be managed within a design system?

Should spacing be applied directly to the <card></card> using margins (e.g., margin-block-end: 1rem; margin-inline-end: 1rem;)? This is problematic because it assumes the context of the card's placement. What if the card is nested within a <grid></grid> component that already uses gap: 1rem? This creates conflicts and hard-coded spacing values.

Approaches to Component Spacing

Several approaches exist, each with trade-offs:

• Baked-in Spacing: Incorporating spacing directly into each component. This is restrictive and inflexible.
• Spacing Props: Passing spacing values as props (e.g., <card space="xxl"></card>). This can become verbose, potentially requiring multiple props for different directions.
• Dedicated Spacing Components: Using components like <spacer></spacer> or <layout></layout> solely for spacing. This cleanly separates concerns but can add unnecessary DOM elements and complexity.

The optimal solution is a matter of debate. While some advocate for eliminating margins entirely, a more pragmatic approach is to separate layout and spacing concerns from the core component functionality. Content components should be agnostic to their placement, allowing higher-level layout mechanisms to handle spacing.

The increasing adoption of gap in Flexbox and Grid suggests a shift away from relying solely on margins. This trend aligns with the desire for more declarative and maintainable layouts.

The above is the detailed content of Component Spacing in a Design System. For more information, please follow other related articles on the PHP Chinese website!