css - 外部元件间距

Question

阅读 Chris Pearce 的 Handling spacing in a UI component library我发现了这个:

... components need to be highly self-contained so that they have zero dependency on any particular UI context or other components. Each component should be able to be dropped anywhere in the UI and it’ll just work.

假设我有一个 Button 组件，为了让按钮“工作”，让这个组件有一个外边距是有意义的，按钮周围的最小空间让它“工作” “(“工作”，看起来不错，没有撞到另一个元素)。

但随后文章转向相反的方向，说:

Components that have outer spacing applied by default can be problematic.

这篇文章以及整篇文章的论点恰恰相反，Button 不应该有那个外层空间，我们可以使用其他技术来设置它:Spacer 组件、Wrapper 组件等。

---

回到基础:

<div id="container">
  <p>Hello</p>
  <p>World</p>
</div>


<Container>
  <Paragraph>Hello</Paragraph>
  <Paragraph>World</Paragraph>
</Container>

在这种情况下，我认为应该是 p 标签(或 Paragraph 组件)负责确保自身与其他元素之间有空格。

这篇文章和我发现的其他文章似乎持相反观点:p 应该只关心其自身，并且根据使用 P 的位置，我们应该以不同方式处理间距。

---

实际问题:是否有关于如何处理外部组件间距的最佳实践记录或共识？

Answer 1

您从我的文章中引用的引用文献并不像您暗示的那样相互矛盾:

But then the article goes on the opposite direction, saying:

但是，我可以理解您是如何解释它的。

基本上我的意思是:

Each component should be able to be dropped anywhere in the UI and it’ll just work.

在外部组件间距中烘烤是否会导致可伸缩性问题，因为您正在降低组件的可重用性(可移植性)，因为它们对它们正在使用或在 中使用的上下文过于自以为是今天……

今天你的<Button>组件在整个 UI 的相同两个上下文中实现，其中在外部间距中烘焙是有意义的。然而，明天，一个新的上下文出现了，这个间距没有意义。在这种情况下，您可以关闭间距，例如:

<Button spacing={false} />

但如果它再次发生怎么办？这就是现在事情开始变得丑陋的地方spacing={false}是默认值，但显然消费者每次都应用它没有意义，因此您现在必须搜索并替换 <Button> 的所有实例。删除 spacing={false}如果您正在开发一个小型应用程序，这可能还不算太糟糕，但想象一下在一个设计系统上工作，在该系统中，您正在为一群开发单个应用程序的团队提供高度可重用的 UI 组件。即使在 <Button> 的 10 种不同实现(上下文)中8 需要外部间距，我仍然不会将其烘烤。

这才是真正的症结所在，只要有 <Button>只关心它自己，以便它更可重用(便携)，而且我认为更容易使用和记录。如果模式出现在您的 <Button> 位置组件需要以特定方式组合，我很可能会考虑创建另一个组件来处理这些问题。

乐高积木类比是一种很好的思考方式。每个组件都是一 block 乐高积木，可以通过多种不同的方式组装，作为一个整体形成一个系统。间距分量covered here只是另一个乐高积木，负责该系统的一个特定部分。我认为它可以与某些计算机科学设计原则相关，例如:

• Component-based software engineering
• Composability
• Separation of concerns

在您的段落示例中，我处理每个段落之间间距的方式是让另一个组件处理它，例如:

<LongFormCopy>
    <P>Bla bla</P>
    <P>Bla bla</P>
</LongFormCopy>

CSS:

.c-long-form-copy p:not(:last-child) {
    margin-bottom: var(--spacing-base);
}

您很少会在 View (或您的 Container 组件)中独立出现类似段落的内容，例如:

<SomeComponent>
<SomeOtherComponent>
<P>Bla bla</P>
<P>Bla bla</P>
<SomeOtherComponent>

我的方法是将它们封装到一个组件中，因为它将代表某种很可能会再次出现的 UI 模式。同样在应用程序 UI 的长格式副本中很少见，因此我喜欢使用 <LongFormCopy>。组件，因为在极少数情况下，您的应用程序具有长格式副本，您可以在一个地方处理所有这些排版问题。这是我的文章 here 中介绍的使用间距组件没有意义的异常(exception)情况之一。 .

也许可以发送您的 <Button> 的屏幕截图我很好奇。

针对您的直接问题:

Is there a documented best practice or consensus on how to handle outer component spacing?

我不确定他们是否会成为如何做到这一点的唯一来源。如果您发现烘焙间距对您有用，同时具有高度可扩展性和可维护性，那么请继续这样做 👍。