CSS-in-JS #

Styled Components

#

社区极为流行的 CC-in-JS 库，将样式定义为组件，以组件的概念定义样式，自动前缀 主题配置 样式融合等功能也是应有尽有

• 官方文档 英文
• 公网仓库 Github | Npm
• 支持度&兼容性

Emotion

#

专为JavaScript编写的号称下一代 CC-in-JS 库，社区较为流行，无视框架默认支持序列化嵌套 对象嵌套，并在生产环境中通过样式缓存技术优化运行时性能，本身也提供了热门框架的捆绑包，值得一试

• 官方文档 英文
• 公网仓库 Github | Npm
• 支持度&兼容性

Linaria

#

号称零运行时的编译型CC-in-JS库，构建期间生产真实的css文件，本身无视框架，并将变量部分css变量化来实现动态化，提供一些功能包原子化 React捆绑包

• 官方文档 英文
• 公网仓库 Github | Npm
• 支持度&兼容性

Goober

#

小于1KB的 css-in-js 解决方案，极小的的包体积下支持超多的功能特性无视框架 动态优化 as特性 动态惰性 自动前缀等特性一应俱全，是一个非常不错的库

• 官方文档 英文
• 公网仓库 Github | Npm
• 支持度&兼容性

Fower

#

设计新颖的 cc-in-js 库，通过提供可控组件来支持Atomic Props的方式编写原子CSS，给予开发者极大的自主权无视框架 原子化CSSinJS CSS组件化(Props) 自动作用域隔离。由于其Atomic Props的设计方式，理论上支持任何组件化场景

• 官方文档 英文 | 中文
• 公网仓库 Github | Npm
• 支持度&兼容性

上述列出框架官方均已提供对应捆绑包~

Styled-jsx

#

与JSX强势捆绑的组件化 cc-in-js 方案，提供组件将样式定义为组件内容(Children)，且支持CSS预处理器各种功能，由于其定义为组件，天然具有作用域隔离 自动前缀 动态注入 响应式等特性，配合 jsx 挥霍的不错的开发体验。

• 官方文档 英文
• 公网仓库 Github | Npm
• 支持度&兼容性

dash-ui styles

#

一个小巧 强大 无关框架的 CSS-in-JS 库，默认提供热门框架集成，支持CSS嵌套 以CSS变量为主，本身提供以功能为主的常用样式包，本身创建的样式支持函数式调用生成，通过传参实现动态化，学习成本几乎为 0

• 官方文档 英文
• 公网仓库 Github | Npm
• 支持度&兼容性

Stitches

#

具有接近零运行时 SSR 多变体支持和一流开发人员体验的 CSS-in-JS 库，本身设计与框架无关，官方提供针对React的捆绑包@stitches/react，支持诸如css prop prop utils smart tokens多种功能

• 官方文档 英文
• 公网仓库 Github | Npm
• 支持度&兼容性

Vanilla Extract CSS

#

TS 局部作用域 无视框架 变量主题 构建时CSS静态化 零运行时 类型安全 内置1KB-动态绑定 高频CSS语法支持 CSS辅助函数 集成热门捆绑包

• 官方文档 英文
• 公网仓库 Github | 生态仓库 Github | Npm
• 支持度&兼容性