Here at Woovi, 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

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

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 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 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!