精读《我们为何弃用 css-in-js》

[ascoders]

emotion 排名第二的维护者 Sam 所在公司弃用了 css-in-js 方案，引起了不小的讨论。以往笔者也是强烈建议走 css-in-js 路线的，所以这次讨论可以学到一些新鲜观点，一起来关注吧：Why We're Breaking Up with CSS-in-JS

---

精读《我们为何弃用 css-in-js》

[tangdw]

请教一下：”通过 :import :export 伪类做 css 变量的导入导出，用 webpack-loader 实现 js 中引用 css 变量，用 css variable 实现 css 引用 js 变量。“ 有没有示例可以学习一下吗？

[NameWjp]

@tangdw 可以参考下这片文章：https://juejin.cn/post/6992428132263264264#heading-5

[Wxh16144]

Ant Design 在 V5 设计了另外一套 CSS-in-JS 方案

repo: https://github.com/ant-design/cssinjs
ref: ant-design/ant-design#33862

[HiWayne]

我认为css-in-js比css-module方案真正有优势的只有：1. 方便的使用运行时变量（css-module想实现需要做更多）2. 代码可维护性（仁者见仁。css-in-js 组件和样式绑定在一起，而css-module组件和样式分离，想查样式需要在多个文件之间来回跳转，年久失修的超大项目修改起来很累，可能还会遇到重名css文件）。有些css-in-js库会在css中不使用js变量的时候不携带运行时包，以优化性能。并且往长远看，时代越发展，这点性能差距越不算问题。