设计系统入门：元件间距的自顶向下方法

在Woovi，我们前端的核心理念之一是确保整个用户界面能够适应未来的任何变化。在创业初期，我们需要加快前端迭代速度，并在这种情况下也能编写出高质量的代码。

保证用户界面代码质量的原则之一，与如何处理子元素之间的间距密切相关。通常，我们会发现两种不同的方法：自顶向下和自底向上。

自下而上

自下而上的方法意味着子元素会对后续（或相邻）元素产生影响。例如margin，当使用类似 `<p>` 的规则来确定两个或多个元素之间的间距时，就是一种自下而上的方法。

这可以算是一种不好的做法。但为什么呢？在上面的例子中，每个子元素都有自己的margin规则应用于8px下一个元素。

在这种情况下，你增加了代码库的熵。你赋予这些子元素决定它们在宏 UI 中行为的权限，从而对其他元素造成不良的副作用。如果其中一个元素的间距值不同（例如，12px从 变为margin-bottom），则调试和确定问题出在哪个元素上会更加困难。

这种方法的 CSS 逻辑也更难处理。如何确保最后一个元素不会应用其他样式margin-bottom？虽然有一些方法可以做到这一点，但这种代码毫无用处，因为别人已经帮你解决了这个问题。

如果有人想把元素之间的间距从 改成8px，12px而不是只改一个元素，那么你需要深入到子元素中，找到我们放置这些边距的地方并进行修改，这样你就需要修改 3 个元素，而不是只修改 1 个元素。

自顶向下

这是一个自上而下间距的例子。在这种模式下，父元素会为其子元素添加间距。而使用弹性盒子布局（Flexbox）时，你需要gap在父元素中设置间距规则，然后为子元素添加间距。

你降低了这段代码周围的熵。你只对子元素应用了这条规则，不会对与此作用域无关的其他元素产生外部副作用。将规则放在单个元素内也是一种更好的做法，这样更容易调试，必要时也更容易找到问题所在。

规则何时margin适用？

几乎所有情况下，边距规则都是不必要的。但在某些情况下，例如标题与其他同级元素之间的间距，边距规则是可以接受的。MaterialUI 提供了一个示例，它公开了一个gutterBottom属性，可以在 Typography 元素中添加边距margin-bottom。在类似这样的情况下，如果您希望在标题元素和“主体其余部分”8px之间添加一些间距，那么使用边距规则是可以接受的。

另一种情况是使用内边距，例如Radix UI 提供的内边距。在设计中，为了更好地将图标和其他相关元素居中，使用边距是一种很好的方法。它能让你更轻松地以更可预测的方式将元素居中放置在特定的父元素周围。

关于我们

Woovi是一家让消费者能够自由选择支付方式的初创公司。为了实现这一点，Woovi为商家提供即时支付解决方案，方便他们接收订单。

我们正在招聘！