CSS-in-JS 的碎片化但不断演变的状态

TLDR： CSS-in-JS 社区已融合到一致的 API 中。

不久前，一位 Facebook 工程师整理了可用 CSS-in-JS 方法的清单。它并不短

aphrodite, babel-plugin-css-in-js, babel-plugin-pre-style, bloody-react-styled, classy, csjs, css-constructor, css-light, css-loader, css-ns, cssobj, cssx-loader, cxs, electron-css, emotion, es-css-modules, freestyler, glamor, glamorous, hiccup-css, hyperstyles, i-css, j2c, jsxstyle, linaria, nano-css, pre-style, radium, react-css-builder, react-css-components, react-css-modules, react-cssom, react-fela, react-free-style, react-inline-css, react-inline-style, react-inline, react-jss, react-look, react-native-web, react-statics-styles, react-styl, react-style, react-styleable, react-stylematic, react-theme, react-vstyle, reactcss, restyles, scope-styles, smart-css, stile-react-media-queries, stilr, stylable, style-it, styled-components, styled-jsx, styletron-react, styling, superstyle, typestyle, uranium

这样一个碎片化的生态系统远非理想。您应该选择哪一个（如果有）？

GitHub 星星是一个有用的指标

然而，GitHub 星星并不能说明项目的轨迹 - 也许它们是在很久以前积累的，而该仓库此后已不受欢迎或不再维护。Glamor 有很多未解决的问题，并且一年多来都没有提交。它的作者建议

…它大部分有效，我不会做任何重大更改…如果您需要更现代的东西，我建议使用 emotion，它与 glamor 的 api 大致相同，并且得到了积极维护。

名称相似的 Glamorous 最近已弃用，其作者也建议用户切换到 Emotion

当时，Emotion 拥有一些 Styled Components 没有的功能。从那以后，Styled Components 做了一些重大宣布。

Styled Components 将自己定位为喜欢 CSS 的人的 CSS-in-JS 库。Styled Components 通过利用标记模板文字而广受欢迎 - 允许开发人员以他们已经熟悉的相同语法*编写 CSS*，但在 JavaScript 文件中。虽然这已被证明很受欢迎，但一些开发人员更喜欢[将样式写成JavaScript 对象. Emotion 提供了灵活性 - 开发人员可以选择如何编写他们的样式。Styled Components 最终也随之效仿。

styled-components v3.3.0 发布，支持一流的对象！😍

很多人都在请求这个功能，你们的愿望得到了实现！感谢@probablyup 负责这次发布。

👉 https://#/yOHWg78nF4 pic.twitter.com/Ic8fZdAFVs

— Max Stoiber (@mxstbr) 2018 年 5 月 25 日

Emotion 还提供了一个css 属性，而 Styled Components 以前没有，直到…

🎉 宣布 styled-components 支持css 属性！ 🎉

这个功能已经开发很长时间了，希望大家喜欢！✨

👉 https://#/DMdrG6uviZ

感谢@satya164 想出了这种巧妙的实现方式！👏

— Max Stoiber (@mxstbr) 2018 年 11 月 26 日

竞争的 CSS-in-JS 库相互借鉴，直到拥有相同的特性集和相同的语法 - Emotion 和 Styled Components 拥有几乎相同的 API。曾经看起来像是一堆竞争的方法和库的混乱现在感觉有点稳定。即使 CSS-in-JS 还没有在依赖项上标准化，它现在已经标准化了一种做事方式 - 只是实现方式不同

在内部，有很大的不同。SC 在组织样式标签顺序方面有很多复杂性。
关于 css 属性：SC 需要 Babel 插件并使用整个 SC 自定义组件创建。Emotion 如果可以的话会跳过自定义组件，并直接用 className 渲染元素

— Kye Hohenberger (@tkh44) 2018 年 12 月 7 日

Styled Components 是迄今为止最受欢迎的 CSS-in-JS 库，但 Emotion 的使用率正在迅速增长。

https://npmcharts.com/compare/glamor,aphrodite,radium,glamorous,styled-components,jss,emotion?interval=30

两者都被一些大型公司使用。Styled Components 被许多大型公司使用，包括彭博社、Atlassian、Reddit、Target、BBC 新闻、赫芬顿邮报、Coinbase、Patreon、Vogue、Ticketmaster、乐高、InVision 和 Autodesk，仅举几例。

Emotion 拥有较少的知名名称，但最近被纽约时报采用。

今天关于我们新的 NYT 故事设计的文章很棒。它提到了我们的共享组件计划 - 如果没有 Emotion / CSS-in-JS，这是不可能实现的。绝对是游戏规则的改变者。生活在未来。 https://#/pZLDJjsbEr

— Scott Taylor (@wonderboymusic) 2018 年 5 月 8 日

---

虽然这些库似乎确实在 React 用户中最为流行，但它们可以与其他框架一起使用。虽然它们似乎最终融合了相同的特性，但很难说这是否是CSS-in-JS 的终点，或者我们是否会从这里看到持续的演变。