134: Mark Dalgleish - You Should Be Using Layout Components

What It Covers

Mark Dalgleish explains why components should have zero surrounding white space and advocates for dedicated layout components to handle spacing, improving design system maintainability and designer-developer collaboration in React applications.

Key Questions Answered

• •Text Baseline Alignment: Browser text naturally centers on line height, creating invisible space above and below characters. Use CSS transforms and negative margins to crop text nodes so they only occupy visual space, enabling predictable component spacing.
• •Layout Component Architecture: Separate all layout concerns into dedicated components like Stack, Inline, Tiles, and Columns. Remove margins and padding from leaf components entirely, allowing designers to compose interfaces by explicitly defining space between elements rather than around them.
• •Responsive Props Pattern: Implement array-based props that accept multiple values corresponding to breakpoint definitions, enabling developers to specify different spacing and column counts per screen size without writing media queries, matching how designers think about responsive behavior.
• •Space as First-Class Concept: Treat space between elements as a collection property, not individual gaps. A stack of cards should have one space value applied to the group, not separate spacers between each item, reducing maintenance and matching designer mental models.