前言

还记得第一次接触到 CSS in JS 是在 20 年在学校第一次尝试用 React 做东西的时候

我老喜欢 Material Design 了，上来做东西那必须是 material-ui(现在的 MUI)

文档里建议的 CSS 编写方式除了 less,scss 这两个主流的预处理器外，还有一个我从未听过的 JS 库: styled-components

当年的我并没有选择去学习了解 CSS IN JS 的东西，今天在看 naive-ui 源码时发现作者自己造了个轮子 css-render，我知道是时候来还债了

什么是 CSS IN JS

就是字面意思，在 js 中编写 css 样式

优点

优点很明显，你可以用想到的任何形式组织样式，非常灵活

  • 可以轻松做到样式隔离

  • css 和页面组件的关系一目了然，不容易出现大量冗余无用的 css 样式，他人浏览项目时效率更高

  • 方便重构或修改样式

  • 跟随组件代码一同加载，用到的才载入，有效避免引入外部 css 时阻塞浏览器渲染的问题

缺点

缺点也十分明显

  • 学习成本高，市面上的实现五花八门，除了上面说的 styled-components 之外还有 emotion,radium 等等

  • 大多数情况下都是客户端动态生成 css，会有客户端性能问题

  • 运行时代码体积不小，例如 styled-components 12.42kB min + gzip，会影响首屏的加载速度

  • 在实际的业务开发中，代码看起来惨不忍睹，可读性极差

  • 没有统一的标准，框架间迁移成本巨高（基本没法迁移）

实现

一般分为两种实现

  • 内联样式

  • 生成唯一选择器，并把样式动态添加到 style 标签内

除此之外，CSS IN JS 的实现库还有不少区别，例如对媒体查询、伪类、动画的支持等等