CSS in JS作为一股不可忽视的力量，正引领着设计与开发的融合新潮流。今天，我们将一起探索最受欢迎的九大CSS in JS框架，它们不仅简化了样式管理，还极大地提升了开发效率与项目可维护性。
Tailwind CSS
Github Start: 81.6K
Tailwind CSS 是一个实用优先的 CSS 框架，提供了一系列低级的、可组合的样式类，使开发者能够以最少的自定义 CSS 来创建现代和响应式的用户界面。
显著特性：
- 实用优先：使用一系列原子类来快速构建 UI，而不是写自定义 CSS。
- 响应式设计：内置响应式设计支持，易于处理不同设备的样式。
- 可配置性：高度可配置的设计，允许自定义主题、颜色、间距等。
styled-components
Github Star: 40.4K
styled-components 是一个流行的 CSS-in-JS 库，允许你在 JavaScript 文件中编写 CSS 样式，并将其直接应用于 React 组件。
原生 CSS 在 React 中的痛点
- 原生 css 没有作用域，极易造成全局污染
- 难以处理嵌套层级关系
- 没有组件化和模块化
- 多样式存在样式覆盖和优先级问题
- 样式多状态管理困难
Styled-components显著特性
- 基于 标记模板 语法
- 以编写 React 组件的形式来定义样式
- 解决 CSS 模块化的问题
- 提供了 CSS 不具备的功能, 比如嵌套
emotion
Github Star: 17.4K
一个与Styled Components十分类似的CSS-in-JS库，它提供了比较强大的可预测样式组合，并且同时支持类似于Styled Components采用的字符串的样式定义和基于对象的样式定义。
显著特性
- 不需要额外的设置、babel 插件或其他配置更改。
- 支持自动供应商前缀、嵌套选择器和媒体查询。
- 高性能：利用高效的缓存策略减少渲染开销。
- 服务器端渲染需要额外的工作来设置
unocss
Github Star: 16.2K
UnoCSS 是一个高度可配置的、按需生成的实用 CSS 框架，支持类似 Tailwind CSS 的原子类，但具有更高的灵活性和性能。
显著特性
- 完全可定制 - 没有核心实用程序。所有功能均通过预设提供。
- 无需解析，无需 AST，无需扫描，它是即时的（比 Windi CSS 或 Tailwind JIT 快 5 倍）。
- ~6kb min+brotli - 零依赖且浏览器友好。
- 快捷方式 - 动态别名实用程序。
- 属性模式 - 将实用程序分组到属性中。
- 纯 CSS 图标 - 使用任何图标作为单个类。
- 变体组 - 具有公共前缀的组实用程序的简写。
- CSS 指令 - 通过 @apply 指令重用 CSS 中的实用程序。
- 编译模式 - 在构建时将多个类合成为一个类。
- 检查器 - 交互式检查和调试。
- CSS-in-JS 运行时构建 - 使用 UnoCSS 和一行 CDN 导入。
- CSS 代码分割 - 为 MPA 提供最少的 CSS。
tamagui
Github Star: 10.9K
适用于 React Native + Web 的通用 UI 工具包和风格系统 - 带有优化编译器。允许你在 Web 和本机应用程序之间共享更多代码，同时改进而不是牺牲 DX、性能和代码可维护性。
显著特性
- 服务器端呈现默认工作，包括响应式样式、主题和变体。
- 对 React 服务器组件的 Beta 支持可显着减少前期捆绑包大小和解析。
- 多级调试编译指示和道具，用于快速文件：行：组件跳转的编译时 JSX 道具。
- 完全没有插件运行，带有针对 Metro、Vite 和 Webpack 的可选优化插件。
- styled factory、变体、标记、字体、主题、媒体查询、速记等等。
vanilla-extract
Github Star: 9.5K
零运行时 CSS-in-TypeScript（或 JavaScript）库，允许您使用 TypeScript 作为您的 CSS 预处理器。样式写在单独的 *.css.ts（或 *.css.js）文件中，并且其中所有代码在构建过程中执行，而不是在用户的浏览器中执行。
显著特性
- 零运行时；
- 类型安全：支持 TypeScript 类型检查。
- style设计职责分离；
- 原生 CSS：生成真正的 CSS 文件，避免 JavaScript 注入的开销。
stylex
Github Star: 8.3K
StyleX 是一个强大的 CSS-in-JS 库，用于定义优化用户界面的样式，在 Meta 的 facebook 等多款应用中已经使用多年。StyleX 使用 JavaScript 实现，不需要 postcss/less/sass 等 css 处理器支持。
panda
Github Star: 5K
Panda CSS是一个现代CSS-in-JS的样式库，支持通过静态分析在构建时生成仅需要的原子类，没有传统CSS-in-JS的插入styles的运行时开销。并且提供样式的类型安全、更高的可读性、更友好的开发体验、更好的兼容性。
显著特性
- 为 Style 定义对象和 props 并在构建中提取它们
- 现代 CSS 输出 — 级联层 @layer、css 变量等
- 适用于大多数JavaScript框架
- 专题和变体
- 支持同步主题
- 类型安全样式和自动完成
nativewind
Github Star: 4.8K
NativeWind 是一个为 React Native 提供的 Tailwind CSS 样式库，允许开发者使用 Tailwind CSS 风格的类来构建移动应用。
该模版已经收录到我的全栈前端一站式开发平台 “前端视界” 中！
感兴趣的添加我的公众号"前端斌少"获取"前端视界"平台链接：
