Emotion库保护者阐明为什么Spot公司不再使用运行时CSS-in-JS

做者 | Bruno Couriol

译者 | 明知山

筹谋 | 丁晓昀

Sam Magura 是 Spot 的软件工程师，也是活泼的 Emotion 库庇护者。比来，他详尽阐了然 Spot 公司为什么舍弃运行时 CSS-in-JS 库 Emotion，而抉择了 Sass 模块——运行时开销、负载开销和办事器端衬着问题招致了较差的用户体验。

在他的博文中，Magura 起首回忆了运行时 CSS-in-JS 的益处。

今天的 Web 利用法式凡是实现为一组协做的组件。在利用运行时 CSS-in-JS 库时，开发人员定义组件的款式以及组件标识表记标帜和逻辑。假设以不准确的体例修改或删除了组件款式，就很难修改或删除组件代码。那处理了大型利用法式中充溢着未被检测到的过时款式规则的问题。但如许的利用法式下载和施行都比力粗笨，对用户体验有负面影响。

将 CSS 规则的感化域严厉限制到相关的组件就很难会无意影响到其他组件的款式。假设没有组件感化域，CSS 的级联和专一性规则可能会招致不相关组件的款式定义发作渗入。

最初，利用齐全的图灵语言，如 Java，开发人员能够完全自在地表达组件款式和组件逻辑之间的关系。假设组件款式不是静态的，而且需要根据用户操做或利用法式情况中的变动停止动态更新时，如许就很便利了。

不外，Magura 根据他对 Spot 代码库的研究得出结论，CSS-in-JS 的害处大于益处：

所以，那就是我们舍弃CSS-in-JS的原因——运行时性能成本太高了。

一方面，在衬着时动态计算和更新款式可能会招致衬着变慢。Magura 比力了 Spot 用运行时 CSS-in-JS 库 Emotion 实现的代码库组件的衬着时间与用 Sass 模块实现的代码库组件的衬着时间（在构建时编译为通俗的 CSS 文件）。比照展现，利用 Emotion 库的衬着时间几乎翻倍（27.7 毫秒对 54 毫秒）。开发人员能够从那篇博文中查看尝试数据、火焰图阐发等等。

另一方面，将 CSS-in-JS 库添加到利用法式代码中会加大阅读器下载的代码包，可能会降低利用法式的启动速度。Emotion 大约 8 KB（最小化后），而 style-components，一个时髦的 CSS-in-JS 库，是 12 KB。

有趣的是，运行时 CSS-in-JS 库施行的动态插进 CSS 款式规则可能其实不老是与生态系统的其他部门很好地共同。

关于 React 18，Sebastian Markage 在 GitHub Issues 中向利用 React 并发衬着功用的开发人员提出了如下的警告：

那是一个 CSS 库（动态生成新规则并将它们与

style标签插进到文档中）的晋级指南，特殊是目前大大都专门为React设想的CSS-in-JS库，如styled-components、styled-jsx、react-native-web。

重视：请务必阅读“When to Insert style on The Client”部门。假设你如今在“衬着期间”注进款式规则，会招致你的库在并发衬着时十分慢。

运行时CSS-in-JS也可能影响办事器端衬着优化。在一篇关于办事器端流的文章 中，Misko Hevery（Qwik框架的做者）、Taylor Hunt和Ryan Carato写道：

例如，CSS-in-JS（如Emotion）是一种十分时髦的办法。但是，假设那种办法意味着在输出款式标签之前所有组件都需要完全衬着，就会中断流，因为框架被迫缓冲整个响应。

Magura提到，Emotion的GitHub项目中笔录的相当多的问题都与办事器端衬着有关（例如React 18的流、规则插进挨次）。陈述的问题可能会产生显著的不测复杂性（即与处理计划相关的复杂性，而不是源于问题自己）。它们还可能招致负面的开发者体验。

固然Magura提醒读者，他的尝试仅限于Emotion库和Spot的代码库，但他估量大部门推理可能同样适用于其他运行时CSS-in-JS库和其他代码库。

一年前，Tomas Pustelnik供给了另一个数据点，虽然表述的体例差别，但指向的问题是类似的。Pustelnik在他的博文“实在世界的CSS与CSS-in-JS的性能比力”中总结道：

就是如许。如你所见，运行时CSS-in-JS能够对网页产生明显的影响，次要针对低端设备和收集毗连较慢或流量价格较高的地域。因而，也许我们应该更好地考虑利用什么东西以及若何利用东西。好的开发者体验不该该以牺牲用户体验为代价。

我认为我们（开发人员）应该更多地考虑我们为项目所抉择的东西可能带来哪些影响。假设下一次我起头一个新项目，我将不再利用运行时CSS-in-JS。我要么利用通俗的CSS，要么利用一些构建时CSS-in-JS替代计划。

时髦的构建时CSS-in-JS库包罗Linaria、Astroturf和vanilla-extract。往年，Facebook推出了本身的构建时CSS-in-JS库stylex，开发人员仍然能够利用CSS模块和相关的生态系统（PostCSS模块、Sass模块）。

CSS-in-JS指的是通过Java生成CSS规则，而不是在外部CSS文件中定义款式。运行时CSS-in-JS库，如Emotion或styles-component，在运行时动态修改款式，例如将款式标签注进文档。零运行时CSS-in-JS是一种在构建时提取所有CSS的形式。

原文链接：

/

马斯克称 Twitter 可能破产；Meta 暴裁 1.1 万人，小扎认可犯了错；GitHub 年度陈述：印度开发者增速超中国 | Q 资讯

动动嘴就能写代码了！Copilot测试新功用“嘿，GitHub”，告别键盘编码

再不拥抱Serverless就晚了 | Q选举

和Rust一样好，编程更平安？三年理论、员工立场反转，英伟达用 SPARK 换掉 C