在 Reactjs 中使用样式化组件而不是 CSS 模块有啥好处 [关闭]

Posted 2023-03-15

【中文标题】在 Reactjs 中使用样式化组件而不是 CSS 模块有啥好处 [关闭]

【英文标题】：What is the benefit of using styled components over css modules in Reactjs [closed]在 Reactjs 中使用样式化组件而不是 CSS 模块有什么好处 [关闭]

【发布时间】：2019-02-23 04:46:16

【问题描述】：

我正在研究在 React 应用程序中设置页面样式的最佳方式是什么。我看到很多库可以在反应中设置样式，例如样式化组件、魅力、CSS 模块。

在我当前的项目中，我正在使用 CSS 模块（主要是为了摆脱 CSS 冲突和特定于页面的 CSS）。我在 Google 上搜索了很多关于为什么要使用样式化组件和 CSS-in-JS，但我无法得到任何具体的答案。所以我的问题是，如果使用 CSS-in-JS 或样式组件有实际的性能优势，还是只是语法糖。

【问题讨论】：

“我在 Google 上搜索了很多关于为什么我应该使用样式化组件和 CSS-in-JS”，原因与您所做的相同：“主要是为了摆脱CSS 冲突”

@Thomas 对不起，我没明白你的意思..

@BharatSoni 问题是这类问题会引发长时间的讨论，最好留给其他论坛。我自己也问过一些问题，尽管它们对将来寻找相同技术的人非常有用，但 SO 通常会关闭它们以减少噪音。也许还有另一个论坛。

[谨慎，严厉的意见] 过去几年在该领域的所有工作都被 CSS-in-JS 所取消。它们在交配季节像兔子一样在库中繁殖，在 webpack 插件中像瘟疫一样繁殖。我将布局问题归咎于缺乏最低限度的组织意识和对开发人员的鄙视。 KISS 原则、SoC 和良好实践正在减缓前端词的消亡。

【参考方案1】：

我在这两种技术方面都有经验，使用过 Radium（JS 库中的另一种 CSS），目前在我的项目中使用 CSS 模块。样式化的组件肯定比 Radium 好得多，因为它们可以让您设置 :hover 状态等样式。但在我看来，CSS 模块仍然是最好的选择，尤其是当您看到您的项目将增长到超过 10-50 个组件时。在 JS 库中跨 CSS 共享代码是一场噩梦。另一方面，CSS 模块可以让你组合其他类，从其他 CSS 文件中导入变量，甚至 JS 也可以从 CSS 中导入变量。

【讨论】：

您是否注意到任何方法中的任何性能问题..

emotion-js 做了所有这些事情，我推荐它

@DanielLizik 你也可以用普通的旧 CSS 做所有这些事情，使用 CSS-Modules 让你能够抽象页面特定的 CSS。为什么我需要emotion-js 或任何其他库。这是这里的主要问题。

据我所知，CSS 模块没有任何性能问题。 Radium 有很多 - 替换内联样式是一个更昂贵的过程，但我认为样式化组件不会遇到与输出 style 节点相同的问题。

【参考方案2】：

在基于 React 的生态系统中，我比任何其他编写 CSS 的方式更喜欢样式化组件的原因之一是它强制执行了最佳实践。正如有人在那里写的那样，在使用样式化组件时共享代码是一场噩梦，我不能同意更多，这就是强制部分的用武之地。如果你没有编写真正的模块化组件，那么 React 组件层次结构应该如何设计（原子组件组成以构建功能丰富的模块），您肯定会多次重写类似的样式。但是，如果您可以使用样式组件（或者甚至内联样式，如果您愿意的话）以真正自下而上的方式分解和组合您的组件，那么代码共享就不再是问题了。进一步的代码共享不应该是在样式级别讨论的问题，在大多数情况下共享封装应该是组件级别的东西。在我看来，CSS 模块只是一个 className 范围限制工具，而样式化组件为基于 React 的项目中的样式提供了一种更具声明性的方法。

我无法理解的缺点之一是样式化组件导致的嵌套组件结构。在命名我的样式组件时，我试图保持更多的语义意识，但我确信可能有其他技术可以做一些事情。我自己觉得这不是什么大问题，因此也没有为此付出太多努力。

样式化组件的性能可能会比 css 模块稍差，因为在创建样式化组件和渲染它们时肯定会产生开销，但这只是微不足道的区别。

【参考方案3】：

可以使用普通的 html 属性，你可以根据需要混入 JS，它支持状态、嵌套和媒体查询。不，它不会全部以 style="" 结尾，而是创建一个“真实的” class= 属性并将 CSS 拉到 head 中，就像 css-modules 一样。

如果自定义组件（不仅是 HTML 组件）只接受 className 作为 prop，它甚至允许您设置它们的样式，所以：

const Button = (props) => <button className=props.className>props.children</button>

const CustomButton = styled(Button) display: inline-block; padding: 5px; const Item = () => 点我！

尽管它与其他技术一样也有缺点。主要是在多个项目之间共享代码可能会变得非常困难

如果您的首要任务是速度，那么迷人或风格化的组件正是您可以在 Web 应用程序中使用的。为 styled-components 编写字符串样式可能有些不寻常，但访问者会喜欢快速加载的网页。如果您决定使用样式组件，请不要忘记install plugin to support syntax highlighting in strings 或者帮助创建一个新组件。

Sass/css 和内联样式也很快，但如果您决定为您的 React Native 应用重用您的代码，请准备好重写您的样式表。但另一方面，css 和其他样式预处理器是 Web 应用程序的不错选择。

【讨论】：

我猜，您是在说另一种设置组件样式的方法。我的问题是，如果使用样式组件或任何其他库而不是css modules 有任何实际好处。

你有任何数据来支持 Glamorous / Styled-Componrnts 比 CSS Modules 或 plain CSS 更快的理论吗？

如果你想在你的机器上运行测试，你可以在github.com/MichalSzorad/styling-react下载完整的代码。您可以按照 README.md 中的指南完成测试。

this comment 在给出的链接中说 PostCSS 仍然会更快...