原子设计:如果包装器不可重用,它应该是一个原子吗?
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
,比如CardHeader
、CardBody
和CardFooter
,都是可选的样式包装器,如有必要,它们将作为 children 传递。
那么,在这个例子中哪种方法是正确的?
CardHeader
、CardBody
和 CardFooter
应归类为原子,在 Card
域之外(意味着它是文件夹)
-- atoms
-- Card
-- CardHeader
-- CardBody
-- CardFooter
CardHeader
、CardBody
和 CardFooter
应该放在 Card
域内,因为它们不可重复使用(这意味着它们被设计为仅与 Card
atom),并且应该与 Card
一起导出到那里,因此此示例中唯一的 atom 将是 Card
-- atoms
-- Card
-- CardHeader
-- CardBody
-- CardFooter
简单答案:后者。
-- atoms
-- Card
-- CardHeader
-- CardBody
-- CardFooter
如您所说,CardHeader
、CardBody
不可在 Card
域外重复使用。因此,将这些子组件与 Card 放在同一级别是没有意义的。专业提示:您可以封装这些子组件,以便它们在 Card 下导出。例如。 Card.Header
、Card.Body
等使事情更明显。
还有一点可能对你有帮助:在我的项目中,我不假设Card是一个原子,而是一个分子。原子是构建块。卡片是文本、图像和按钮等较小构建块的集合。因此,它作为一个分子更有意义。
在我们公司,我们使用 Atomic Design 作为我们的设计系统(使用 React 和 Styled Components 作为我们的样式解决方案),以便将我们的 UI 分解为原子、分子和有机体
我对何时应将原子归类为原子或是否应在其 parent 域内有疑问。
您可以在这个 Material UI Card 示例中看到此类组合的示例(它没有使用原子设计,但您仍然可以理解)。
所以,想象一下下面的例子,你有一个 Card Atom(因为它只是一个包装器,returns 带有 children 的样式化 HTML 标签):
const Card = ({children}) => <StyledWrapper>{children}</StyledWrapper>
还定义了一些children来配合Card
,比如CardHeader
、CardBody
和CardFooter
,都是可选的样式包装器,如有必要,它们将作为 children 传递。
那么,在这个例子中哪种方法是正确的?
CardHeader
、CardBody
和CardFooter
应归类为原子,在Card
域之外(意味着它是文件夹)
-- atoms
-- Card
-- CardHeader
-- CardBody
-- CardFooter
CardHeader
、CardBody
和CardFooter
应该放在Card
域内,因为它们不可重复使用(这意味着它们被设计为仅与Card
atom),并且应该与Card
一起导出到那里,因此此示例中唯一的 atom 将是Card
-- atoms
-- Card
-- CardHeader
-- CardBody
-- CardFooter
简单答案:后者。
-- atoms
-- Card
-- CardHeader
-- CardBody
-- CardFooter
如您所说,CardHeader
、CardBody
不可在 Card
域外重复使用。因此,将这些子组件与 Card 放在同一级别是没有意义的。专业提示:您可以封装这些子组件,以便它们在 Card 下导出。例如。 Card.Header
、Card.Body
等使事情更明显。
还有一点可能对你有帮助:在我的项目中,我不假设Card是一个原子,而是一个分子。原子是构建块。卡片是文本、图像和按钮等较小构建块的集合。因此,它作为一个分子更有意义。