Design System 101: Top-down Approach in Component Spacing
Tags: css, webdev, tutorial, frontend
Published: 2023-09-21 11:32:30

Here at [Woovi](https://woovi.com), one of our core philosophies around the front-end is ensure that our entire UI will be resilient around any future change. In the startup scenario, we need to iterate faster in our front-end and produce a high-quality code even in this scenario.

One of the principles that serves as a guarantee of a good code in the UI is related to how we handle the spacing between children elements. In general, we will find two different approaches: top-down and bottom-up. 

## Bottom-up

![An example of bottom-up approach](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3rkqqykateyy3vqc05v.png)

A bottom-up approach implies in the children elements causing a side-effect in the next (or close) elements. Rules like `margin`, when used to determine the spacing between two or more elements, is a bottom-up.

This can be called a bad practice. But why? In the example above, each child has their own `margin` rule applying `8px` to the next element. 

In this scenario, you're creating more entropy around your codebase. You give the power to these children to determine how they will behave in the macro UI, causing an undesirable side-effect around other elements. If one of these elements has a different spacing value, like `12px` to `margin-bottom`, will be harder to debug and identify in which of these elements is the issue.

The CSS logic around this approach would be more harder to handle too. How do you ensure that the last element won't apply another `margin-bottom`? You have some ways to ensure it, but it's the kind of code that is useless because someone already solved to you.

If someone wants to change the spacing between elements from `8px` to `12px`, instead of changing only one element, you'll need to deep dive around the children finding where we're putting these margins and modify it, then you modify 3 (three) elements instead of only 1 (one).

## Top-down


![An example of top-down approach](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuwsyxnuv99dtb5m4yvm.png)

This is an example of top-down spacing. With this pattern, the parent element applies the spacing around their children. With a _flexbox_, you put a `gap` rule in the parent element and add the spacing around the children elements.

You're reducing the entropy around this code. You apply this rule only for the children elements, not having an external side-effect around other elements that aren't related to this scope. Putting the rule inside only one element is a better practice too, it's easier to debug and find around if necessary.

## When `margin` rule can be applied?

A margin rule is unnecessary in almost every case. But can be acceptable given some context, for example, a spacing between a heading, and the rest of their siblings. MaterialUI provide to us an example of it, exposing a `gutterBottom` prop that adds a `margin-bottom` of `8px` in the Typography element. In cases like that, where you want to add some spacing between the heading element and the _"rest of the body"_, a margin is acceptable.

Another scenario are insets, like the [Inset](https://www.radix-ui.com/themes/docs/components/inset) exposed by the Radix UI. Is a good practice around design stuffs to give a better centralization around some icons and other related stuffs, a good way to do it is using margin. It gives to you an easier way to centralize an element with a more predictable way around a specific parent.

---

## About us

[Woovi](https://woovi.com) is a startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

We are [hiring](https://woovi.com/jobs/)!