css - 样式化组件组织

Question

我想在我的应用程序中使用样式组件，我想知道如何组织它。

基本上，样式组件被分配给特定组件以实现可重用性。

但是我想在其他组件（例如动画组件）中多次使用的样式组件呢？我应该创建一个文件来保存这些“全局”样式组件并将其导入到许多组件中吗？

这是好习惯吗？

Answer 1

这就是我使用样式组件构建的大多数大型生产应用程序的样子：

src
├── App
│   ├── Header
│   │   ├── Logo.js    
│   │   ├── Title.js   
│   │   ├── Subtitle.js
│   │   └── index.js
│   └── Footer
│       ├── List.js
│       ├── ListItem.js
│       ├── Wrapper.js
│       └── index.js
├── shared
│   ├── Button.js
│   ├── Card.js
│   ├── InfiniteList.js
│   ├── EmojiPicker
│   └── Icons
└── index.js

该App文件夹包含构成更大应用程序的所有特定组件。（你可能会在你的真实应用程序中通过路由来构建它）每个更大的组件都是一个文件夹，其中包含一个index.js文件和一组单独文件中的样式组件。

当我正在构建我的应用程序时，我注意到我需要一个来自另一个更大组件中的一个更大组件的样式化组件，我将它的文件拖到文件shared/夹中，更新所有导入，就是这样！随着时间的推移shared/，它变成了一个临时模式库，其中包含我想要/需要在整个应用程序中重用的所有组件。

另一种相当常见的方法是style.js在包含该组件的所有样式组件的组件文件夹中拥有文件。好处是你有更少的文件妨碍你，但缺点是更难注意到重复和将组件移动到共享文件夹中是更多的工作。

我个人经常使用第一个版本，但这可能只是一个口味问题 - 尝试它们，看看你更喜欢哪个！

Answer 2

您还可以尝试使用原子设计来构建您的应用程序。这样，您将能够重用您的样式组件。基于原子设计方法，您将组件组织成原子、分子、有机体、页面和模板。

原子

atom 是原生的 html 标签。例如，一个 Input 元素可以是一个 Atom

const Input = props => <input {...props} />

分子

原子团是一个分子。例如：

const Field = ({ label, ...inputProps }) => (
    <Label>
        {label}
        <Input {...inputProps} />
    </Label>
)

有机体

有机体是一组原子、分子和/或其他有机体。例如：

const Form = (props) => (
    <form {...props}>
        <Field label="Name" type="text" />
        <Field label="Email" type="email" />
    </form>
)

页面

页面是您主要放置生物的地方。例如：

const HomePage = () => (
    <PageTemplate header={<Header />}>
        <Form />
    </PageTemplate>
)

模板

模板是要在页面上使用的布局。例如：

const PageTemplate = ({ header, children }) => (
    <main>
        {header && <div>{header}</div>}
        {children}
    </main>
)

Github 示例

Github 上有一个 React 入门项目，它使用原子设计方法和样式组件集成。这是链接。

Answer 3

我用 styled-component 组织我的项目的方式如下：

src
├── Layout
│   ├── Header
│   │   ├── Logo.jsx    
│   │   ├── styled.js
│   │   ├── container.js
│   │   └── index.js
│   └── LeftPanel
│       ├── LeftPanel.jsx
│       ├── styled.js
│       └── index.js
└── index.js

推理：

• 每个文件夹都是一个功能。
• 文件夹中的每个文件都有责任。
  • .jsx表示一个表示组件。
  • styled.js是样式化的组件。只管理组件的外观。任何主题相关的文件也应该在这里导入，例如颜色、边框样式等。
  • container.js如果我们使用任何状态管理，我们应该有一个将我们的组件与该库连接的工件。在这种情况下，Redux。
  • index.js出口任何相关的东西。

我看到这种方法的优点是，如果您决定使用另一个 CSSinJS 库，那么必须在哪里进行更改非常清楚。

希望对其他人有意义。

干杯!