每个 React 组件都应该有自己的样式表吗？答案

【问题标题】：Should every react component have it's own stylesheet?每个 React 组件都应该有自己的样式表吗？
【发布时间】：2018-05-01 22:14:51
【问题描述】：

我刚开始使用 React，并且有一个在任何地方都找不到的简单问题。

那么，每个 React 组件都应该有自己的样式表吗？

例如，如果我有我的主要应用程序组件，我应该在其中包含一个 css 文件并在其中包含我的所有样式，还是最好为每个组件拥有一个自己的 css 文件？

谢谢。

【问题讨论】：

来自对 React 知之甚少的人，我认为为每个组件都有一个样式表很麻烦，并且可能会增加应用程序的加载时间，除非它们都在结尾。 “通用”样式表的重点是能够跨 DOM 中的各种元素重用规则。
每个.js 文件获取一个.css 文件。您希望您的组件能够控制它们的显示方式。
它不会减慢我的网络应用速度吗？

【解决方案1】：

React 中的 CSS 最佳实践仍在激烈争论。每种变化都有优点和缺点。

您可能正在寻找 CSS 中的模块化。虽然为您的组件拥有独特的样式表确实在某种程度上实现了这一点，但我建议您查看CSS modules。像这样的包可以让你的 CSS 包含在一个特定的组件中，这样你就不会在其他组件上覆盖样式。

就我个人而言，我两者都做了一点。我使用基本样式表（例如引导程序）。然后我使用 CSS 模块来帮助我制作独特的组件，我可能希望轻松地将其移植到其他项目中。

【讨论】：

好的。如果我为每个组件都有自己的 css 文件，这是否会使我的网络应用程序变慢？
视情况而定。每个组件都有一个 CSS 文件可以让你动态地包含/排除 CSS，这样你就可以通过不加载无用的 CSS 来加速你的应用程序。此外，你可以设计你的 webpack 来编译和压缩你的 CSS 到一个文件中。例如，创建 React App 会为您执行此操作。
我现在用的是create-react-app，是不是把每个css文件都编译成一个文件？
它在您构建最终生产应用程序时执行。但是，如果您使用的是开发版本（通过使用 yarn start），那么它会保持 CSS 文件拆分，以便在您保存时自动更新。很酷吧？
是的，很好！