大家好,很高兴又见面了,我是"前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!
emotion 排名第二的维护者 Sam 所在公司弃用了 css-in-js 方案,引起了不小的讨论。
原文很有条理,先从 css-in-js 优点说起,再转而谈到缺点,说明了 css-in-js 这个新事物拥有明显的优点与缺点;然后从性能问题作为切入点,说明自己所在的公司为什么不得不抛弃 css-in-js;最后告诉读者目前自己的解决方案是 css-modules。
之后还有一点儿延展性思考,即目前还诞生了一批编译时 css-in-js 方案,但面对性能问题时依然徒劳。让我们花点儿时间了解下作者的具体思路吧。
css-in-js 作为一个理念较新的开发思路,拥有如下几个明显的优缺点。
除了上述缺点外,css-in-js 还有三点深度使用后才能察觉的坑:
除了性能问题以外,其他问题都可以忍,但偏偏在性能问题上,css-in-js 遇到了无解的场景。
第一条缺点提到的运行时解析,是 css-in-js 方案永远跨不过去的困境,即便对于编译时 css-in-js 方案来说,也免不了在渲染时做额外的逻辑执行拖慢渲染速度:
function App() {
return ;
// 就是这种代码导致了性能问题
}
原因是当 React 重渲染组件时,需要重新解析样式定义,并序列化 className,当渲染非常频繁时会导致明显的性能瓶颈,而解决方法是把样式定义抽出来,但这样就损失了第三个优点,即无法读取 js 变量了:
const myCss = css({
backgroundColor: "blue",
width: 100,
height: 100,
});
不得不说 React 的渲染机制实在是太有问题了,如果换成 SolidJS 这个问题就好办了,因为运行时的样式代码仅会运行一次,组件重渲染也不会导致这段解析代码被重复执行,此时 css-in-js 在样式变化时再做一次精确样式更新,性能问题就可以被解决了。
css-modules 同时支持优点一和二,而优点三可以通过一些特定语法糖绕过:通过 :import :export 伪类做 css 变量的导入导出,用 webpack-loader 实现 js 中引用 css 变量,用 css variable 实现 css 引用 js 变量。
所以当性能问题是绕不过去的话题,而 css-modules 在性能最优的情况下,有一些曲线方案可以同时支持 css-in-js 的优点,也就能理解为什么作者要弃用 css-in-js 了。
原文谈到的 css-in-js 增加了 8~16kb 其实是在强行堆缺点了,除非你的项目只有一行 css 定义。如果我们只考虑传输时的包体积与 HTML 中样式定义数量,而忽略运行时产生的性能负担,那么 css-in-js 在大型项目无疑是最优的。
原因就是 css-in-js 样式是按需插入的,没有渲染的组件就不会插入样式。甚至渲染了的组件也不一定会插入样式,因为 css-in-js 可以对包含相同样式定义的场景做 className 合并,类似于 webpack 打包时,可以把不同模块公共代码抽到一个 chunk 里。
理论上是出路,但限制了 css-in-js 的灵活性。从 vanilla-extract 等编译时 css-in-js 框架来看,确实解决了运行时 css-in-js 性能问题,但带来了更多语法限制,比如必须预先定义样式再使用:
import { style } from '@vanilla-extract/css'
const myStyle = style({
display: 'flex',
paddingTop: '3px'
})
const App = () =>
编译时 css-in-js 想要做到通用性,只能提供一个 className,这样就不受任何框架和环境的限制了,但这样也限制了声明语法的灵活性,显然不可以用内联方式定义样式。
而且这种编译时的方案本质上和 css-modules 是一样的,背后都是定义了一些静态样式名,只是说这些样式问题以 .sass 定义还是 .ts 定义,如果用 .ts 定义,配合编译工具可以使代码原生 import 的更加舒服。
所以使用了编译时 css-in-js 方案,本质上还是抛弃了运行时 css-in-js,投向了变种的 css-modules 阵营。
css-in-js 本身方向是对的,即把 css 与 js 融合,但太过灵活的运行时 css-in-js 方案遇到了几乎不可解的性能问题,编译时的 css-in-js 方案可能是更好的出路。
css-in-js 这个名字本身就表示它拥有 in js 的灵活性,而编译时 css-in-js 方案本质因为是 css-module,所以不可避免拥有一些比较奇怪的限制,如果 js 里的代码不能像真的 js 一样灵活,可能还不如回到 .scss 或者 .less 的后缀更好理解一些。
原文链接:https://github.com/ascoders/weekly
原文作者:黄子毅
页面更新:2024-05-26
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号