原子设计：如果包装器不可重用，它应该是一个原子吗？

问题描述

在我们公司，我们使用 Atomic Design 作为我们的设计系统（使用 React 和样式化组件作为我们的样式解决方案），以便将我们的 UI 分解为原子、分子和有机体

我对何时应将原子归类为原子或是否应在其父域内有疑问。

您可以在此 Material UI Card 示例中看到此类组合的示例（该示例未使用原子设计，但您仍然可以理解）。

那么，想象一下下面的例子，你有一个 Card Atom（因为它只是一个返回带有子元素的样式化 HTML 标签的包装器）：

const Card = ({children}) => <StyledWrapper>{children}</StyledWrapper>

还定义了一些与 Card 一起使用的子代，例如 CardHeader、CardBody 和 CardFooter，它们都是可选的样式包装器，并且它们被传递必要时作为孩子。

那么，在这个例子中哪种方法是正确的？

• CardHeader、CardBody 和 CardFooter 应归类为原子，位于 Card 域之外（意味着它是文件夹）

-- atoms
  -- Card
  -- CardHeader
  -- CardBody
  -- CardFooter

• CardHeader、CardBody 和 CardFooter 应放置在 Card 域内，因为它们不可重复使用（意味着它们只能与 {{1} }} 原子），并且应该与 Card 一起导出，所以这个例子中唯一的原子是 Card

Card

解决方法

简单的答案：后者。

-- atoms
  -- Card
    -- CardHeader
    -- CardBody
    -- CardFooter

如您所说，CardHeader、CardBody 在 Card 域之外不可重复使用。因此，将这些子组件与卡片放在同一级别是没有意义的。专业提示：您可以封装这些子组件，以便在 Card 下导出它们。例如。 Card.Header、Card.Body 等使事情更明显。

另一点可能对您有帮助：在我的项目中，我不假设 Card 是一个原子，而是一个分子。原子是构建块。卡片是诸如文本、图像和按钮等较小构建块的集合。因此，它作为一个分子更有意义。