Margin Considered Harmful

We should ban margin from our components. Hear me out.

Margin breaks component encapsulation. A well-built component should not affect anything outside itself.

Margin makes reusability harder. Good components are usable in any context or layout.

Margin conflicts with how designers think. Designers think about space in relation and context. They define how far a component should be from another component in a specific instance.

By banning margin from all components you have to build more reusable and encapsulated components.

Moving responsibility

Instead of margin I have started using spacer components, which move the responsibility of managing space to the parent-level.

For example, the Braid design system popularized the Stack component :

<Stack space={3}>
  <Item />
  <Item />
  <Item />
</Stack>

Using spacer components has implications that are not obvious a priori .

Spacer components (such as Stack above) can restrict spacing values to steps on a scale. That way, all spacing automatically aligns to the grid.

Spacer components define how far a component should be from another component in a specific instance. You have to define space in relation and context.

Who else thinks about space in relation and context? Designers.

Spacer components bring us closer to how designers think. They make our designs more consistent and they force us to build more reusable and encapsulated components.

Use spacer components. Ban margin.

I am not the first one to realize this. Thanks to @markdalgleish and @michaeltaranto at Seek for paving the way and prompting me to think about it.