反应一个CSS文件或每个组件一个CSS文件

Question

我想知道是否最好拥有一个带有注释的大型 css 文件，将代码分解为相应的部分（例如页脚、页眉）。或者每个组件一个 css 文件。例如。页眉.css，页脚.css？有什么优点和缺点？

Answer 1

我认为答案不是特定于 React 的，而是个人偏好之一。

但是，我倾向于发现 POD 结构更容易使用。

我典型的 React 组件使用 css 模块，看起来像这样：

# components/Example/styles.module.css
.example {
  background:blue;
}

# components/Example/index.js
import styles from './styles.module.css'

class Example extends React.PureComponent {
  render () {
    return (
      <div className={styles.example}>Example</div>
    )
  }
}

Answer 2

这取决于很多事情：

1. 您的应用程序/网站有多大？

2. 这是由团队完成还是你自己完成？

3. 这是一个业余爱好项目还是实际的商业产品？

单文件方法

优点：

• 所有样式都在一个文件中，因此您只需查看该文件即可。

缺点：

• 这个文件会增长得非常快，维护起来会变成一场噩梦。
• 可能会变得更难推理，特别是如果这是由多人解决的。

模块化方法

优点

• 易于推理，因为文件被分成自己的模块。
• 组件模块可以共享（如果做得正确）。

缺点：

• 从长远来看，需要管理更多文件。不过，如果您有构建管道，那应该不是什么太大的问题。例如，Webpack 可以很好地处理这个问题。
• 正确命名所有 CSS（是的，命名可能很烦人）。
• 可能需要更多初始设置和配置。 （不确定您是否使用任何构建管道或工具）。