对每个组件响应一个css文件或一个

Question

我想知道是否最好有一个巨大的css文件与注释，将代码分解为相应的部分(例如页脚，页眉)。或为每个组件提供一个css文件。比如header.css，footer.css？优点和缺点是什么？

Answer 1

这取决于很多事情：

你的application/website?有多大？

1. 是由一个团队还是你自己来做的？

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

单文件方法

优点：

• 所有样式都在一个文件中，所以您只需查看一个文件.

缺点：

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

模进

优点

当文件被分割成自己的modules.

• Component模块时，
• 很容易推理，可以共享(如果操作正确的话)。

缺点：

从长远来看，

• 需要管理更多的文件。虽然如果您有一个构建管道，这应该是一个太大的问题。例如，Webpack将适当地处理nicely.
• Naming所有的CSS (是的，命名可以是annoying).
• Might，需要更多的初始设置和配置。(不确定是否使用了任何构建管道或工具)。

Answer 2

我不认为答案是具体的反应，实际上是个人偏好。

然而，我倾向于发现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>
    )
  }
}