原子设计:如果包装器不可重用,它应该是一个原子吗?

Atomic Design: should a wrapper be an atom if it's not reusable?

在我们公司,我们使用 Atomic Design 作为我们的设计系统(使用 React 和 Styled Components 作为我们的样式解决方案),以便将我们的 UI 分解为原子、分子和有机体

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

您可以在这个 Material UI Card 示例中看到此类组合的示例(它没有使用原子设计,但您仍然可以理解)。

所以,想象一下下面的例子,你有一个 Card Atom(因为它只是一个包装器,returns 带有 children 的样式化 HTML 标签):

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

还定义了一些children来配合Card,比如CardHeaderCardBodyCardFooter,都是可选的样式包装器,如有必要,它们将作为 children 传递。

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

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

简单答案:后者。

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

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

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