大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

今天给大家带来的主题是《2023 年最受欢迎的 10 大 CSS-in-JS 库！》，其中针对部分 CSS-in-JS库后面会单独出文介绍，可以随时保持关注。话不多说，直接开始！

styled-components

Styled Components 可以轻松地为 Web 应用程序创建和管理样式，其允许开发者在 JavaScript 中编写样式，这些样式可以更加模块化、可重用并与应用程序逻辑的其余部分集成。

此外，Styled Components 允许开发者使用 JavaScript 表达式来创建动态样式。这对于希望根据特定条件（例如屏幕宽度或当前用户的首选项）设置元素样式的情况非常有用。开发者还可以使用 Props 将信息从组件传递到样式。

以下是 styled-components 的一些主要特点：

一种声明式语法，使样式更具可读性和可维护性
通过 JavaScript 表达式支持动态样式
能够使用 props 将信息从组件传递到样式
强大的社区支持和不断发展的插件和集成生态系统。

以下示例展示了 styled-components 的基本用法。

import React from 'react';
import styled from 'styled-components';
// 创建一个  反应组件来渲染一个 <h1> 
// h1居中，浅紫色，大小为 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;
// 创建一个 <Wrapper> 组件来渲染一个 <section>
// 一些填充和背景
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;
// 像使用任何其他 React 组件一样使用它们——除了它们是样式化的！
<Wrapper>
  <Title>Hello World, this is my first styled component!
;

在 Github 上，styled-components 已经有超过 38.7k 的 star 和 2.4k 的 fork，每周的平均下载量达到了 5451k。目前有超过 1672 k 的项目使用 styled-components、项目贡献人数 310+，增长势头迅猛。

CSS Modules

CSS 模块让开发者可以在常规 CSS 文件中编写样式，然后将这些样式导入 JavaScript 组件。这可以帮助开发者避免一些编写全局样式的陷阱，例如：冲突和意外的副作用，同时仍然享受使用 CSS 的好处。

CSS Modules 的关键特性之一是它会自动为样式生成唯一的类名，这意味着开发者可以像在常规 CSS 文件中一样使用熟悉的选择器和规则编写样式。

但是，值得注意的是，当将样式导入 JavaScript 组件时，CSS 模块会自动重命名类名，以确保它们不会与应用程序中的其他样式冲突。这可以帮助开发者避免命名冲突和使用全局样式时可能出现的其他常见问题。

举一个例子，从 JS 模块导入 CSS 模块时，它会导出一个对象，其中包含从局部名称到全局名称的所有映射。

import styles from './style.css';
element.innerHTML = '';

在 Github 上，css-modules 已经有超过 16.8k 的 star 和 0.55k 的 fork，每周的平均下载量达到了 5451 k。

Styled JSX

Styled JSX 是一个库，它允许开发者编写限定在特定组件范围内的 CSS 样式。无需将 CSS 放在单独的文件中，开发者可以将其直接写入组件文件，从而更灵活控制样式应用方式。

使用 Styled JSX 的主要优点之一是它允许开发者以与组件结构更紧密的方式编写样式，从而使得样式更容易理解和维护，尤其是在具有许多组件的大型项目中。

Styled JSX 还可以轻松地根据 props 或 state 动态地设置组件的样式。这对于创建可自定义以适应不同场景的可重用组件很有用。

// 按钮组件
function Button({ children }) {
  return (
    
  );
}

以下是 Styled JSX 的一些主要特性：

直接在 JavaScript 代码中编写样式
使用 JavaScript 的全部功能来创建样式
易于阅读和理解的语法
不需要单独的 CSS 文件
高度模块化和可重用的代码。

在 Github 上，styled-jsx 已经有超过 7.4k 的 star 和 0.4k 的 fork，每周的平均下载量达到了 3397k。目前有超过 1234 k 的项目使用 styled-jsx、项目贡献人数 70+，是妥妥的前端明星项目。

Emotion

Emotion 是一个允许开发者在 JavaScript 中编写样式的库，它允许将所有样式与组件放在一起，而不是放在单独的 CSS 文件中。

@emotion/css 包与框架无关，是使用 Emotion 的最简单方法，比如下面的示例：

import { css } from '@emotion/css';
const color = 'white';
render(
  
    Hover to change color.
  
);

同时 Emotion 还提供了@emotion/react 包用于与 React 集成，比如下面的示例：

import { css } from '@emotion/react';
const color = 'white';
render(
  
    Hover to change color.
  
);

该库还提供了很多其他集成，例如： Styled Components。并为 Babel、ESLint、Jest 等提供自定义包。

以下是 Emotion 的一些主要功能：

它会自动限定样式范围，以避免与页面上的其他样式发生冲突。
使用强大的模板文字语法，可使用熟悉的 CSS 语法，但具有 JavaScript 的附加优势。
允许使用 JavaScript 表达式来定义样式，这使得创建基于 props 或 state 的动态样式变得容易。

在 Github 上，Emotion 已经有超过 16.3k 的 star 和 1.1k 的 fork，每周的平均下载量达到了 3397k。目前有超过 270 k 的项目使用 Emotion、项目贡献人数 300+，是妥妥的前端明星项目。

JSS

JSS 支持所有现有的 CSS 特性，并默认生成唯一的类名，以避免全局样式冲突。 JSS 还允许代码重用、动态样式、用户控制的动画和关键 CSS 提取。

JSS 具有基于插件的架构，允许自定义插件和表达语法。 JSS 还与 React 很好地集成，提供动态主题和惰性执行等功能。总的来说，JSS 提供了一种在 React 应用程序中使用 CSS 的强大而高效的方式。

import React from 'react';
import { render } from 'react-dom';
import { createUseStyles } from 'react-jss';
// 创建你的样式，请记住，由于 React-JSS 使用默认预设，
// 大多数插件无需进一步配置即可使用。
const useStyles = createUseStyles({
  myButton: {
    color: 'green',
    margin: {
      // jss-expand 提供更易读的语法
      top: 5, 
      // jss-default-unit 默认值 5px
      right: 0,
      bottom: 0,
      left: '1rem',
    },
    '& span': {
      // jss-nested 将其应用于子级span
      fontWeight: 'bold', 
      // jss-camel-case turns this into 'font-weight'
    },
  },
  myLabel: {
    fontStyle: 'italic',
  },
});

const Button = ({ children }) => {
  const classes = useStyles();
  return (
    
  );
};
const App = () => ;
render(, document.getElementById('root'));

在 Github 上，JSS 已经有超过 6.9k 的 star 和 0.42k 的 fork，每周的平均下载量达到了 2098k。目前有超过 572 k 的项目使用 JSS、项目贡献人数 130+，是妥妥的前端明星项目。

Styled System

Styled System 是一个库，可帮助开发者使用声明式方法设计 React 组件的样式，这意味着开发者只需要指定希望组件看起来像什么，Styled System 将默认处理其余部分。

Styled System 最好的地方之一是它建立在流行的 CSS-in-JS 库之上，例如： Emotion 和 Styled Components。这意味着它与范围广泛的现有工具和库兼容，开发者可以将它与任一库结合使用。

//示例使用 styled-components，但 styled-system 也适用于大多数其他 css-in-js 库
import styled from 'styled-components'
import { space, layout, typography, color } from 'styled-system'
// 将样式化系统函数添加到您的组件
const Box = styled.div`
  ${space}
  ${layout}
  ${typography}
  ${color}

Styled System 的一些主要功能包括：

简单直观的 API，可让开发者快速轻松地定义样式
内置支持各种样式属性，包括：大小、颜色和间距
能够创建适应不同屏幕尺寸的响应式设计（Grid 和 Flexbox 包）
一个强大的插件和实用程序生态系统，可以轻松扩展和自定义样式

在 Github 上，Styled System 已经有超过 7.6k 的 star 和 0.53k 的 fork，称得上是一个值得关注的前端明星项目。

vanilla-extract

vanilla-extract 零运行时特性很棒，它允许开发者编写样式表并在构建时将它们编译成静态 CSS 文件。这提供了类型安全和局部作用域样式的好处。

// styles.css.ts
import { createTheme, style } from '@vanilla-extract/css';
export const [themeClass, vars] = createTheme({
  color: {
    brand: 'blue',
  },
  font: {
    body: 'arial',
  },
});
export const exampleStyle = style({
  backgroundColor: vars.color.brand,
  fontFamily: vars.font.body,
  color: 'white',
  padding: 10,
});

vanilla-extract 的突出特点之一是它对主题的支持。开发者可以创建一个全局主题或多个主题，所有主题都具有类型安全的令牌合约，这使得自定义项目的外观变得容易。

Vanilla-extract 的另一个优势是它与框架无关，它具有流行框架和打包器（如 webpack、esbuild、Vite 和 Next.js）的官方集成。

总的来说，Vanilla-extract 是一个很优秀的库，适合任何希望利用 TypeScript 的附加优势大规模编写可维护的 CSS 的人。

在 Github 上，vanilla-extract 已经有超过 8k 的 star 和 0.2k 的 fork，有超过 18.6 k 的项目使用，是妥妥的前端明星项目。

Linaria

Linaria 是一个 CSS-in-JS 库，允许开发人员使用 JavaScript 编写 CSS，并在构建期间将样式提取到 CSS 文件中。这提供了动态样式和熟悉的 CSS 语法以及类似 Sass 的嵌套的好处。

除了作为一个零运行时库之外，Linaria 还通过 React 绑定支持基于属性的动态样式。这利用了幕后的 CSS 变量，使得基于组件 props 的应用样式变得毫不费力。

Linaria 由两个主要部分组成：Babel 插件和打包器集成。 Babel 插件负责在代码中查找 css 和 style 标签，提取 CSS 并将其返回到文件的元数据中，它还将根据文件名哈希生成唯一的类名。

import { css } from '@linaria/core';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';
//在 `css` 标签中写下你的样式
const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
  font-size: ${modularScale(2)};

  ${hiDPI(1.5)} {
    font-size: ${modularScale(2.5)};
  }
`;
//然后用它作为类名
Hello world
;

使用 styled 标签时，动态插值将替换为 CSS 自定义属性，对作用域中常量的引用也将被内联。如果多次使用相同的表达式，插件将为这些创建单个 CSS 自定义属性。

import { styled } from '@linaria/react';
import { families, sizes } from './fonts';
// Write your styles in `styled` tag
const Title = styled.h1`
  font-family: ${families.serif};
`;
const Container = styled.div`
  font-size: ${sizes.medium}px;
  color: ${(props) => props.color};
  border: 1px solid red;

  &:hover {
    border-color: blue;
  }
  ${Title} {
    margin-bottom: 24px;
  }
`;
// Then use the resulting component

  Hello world
;

在 Github 上，Linaria 已经有超过 10.4k 的 star 和 0.42k 的 fork，每周的平均下载量达到了 276k。目前有超过 1.5 k 的项目使用 Linaria、项目贡献人数 130+，是妥妥的前端明星项目。

Twin

Twin 是一个库，它使开发人员能够通过结合 Tailwind CSS 和 CSS-in-JS 的优势来构建更好的应用程序。

Twin 允许使用 Tailwind 类设置前端组件的样式，然后将它们编译到任何受支持的 CSS-in-JS 库中。这消除了对额外客户端包的需要。 Twin 与 React 和其他 React 框架兼容，并且开箱即用地支持 Vue。

Twin 的特点包括：

使用 tw 属性的基本样式，用于将 Tailwind 类添加到 JSX 元素
使用 css 属性和数组中的嵌套样式的条件样式
在 css props 之后使用 tw props 覆盖样式
通过提取样式并将它们分组到一个对象中来清理 JSX
具有自定义选择器和任意变体的样式元素
具有任意属性的自定义 css 和 css props
具有类似 sass 的语法和对象的高级 css 样式。

比如下面的用例将 sass 样式与 css 导入混合：

import tw, { css } from 'twin.macro';
const hoverStyles = css`
  &:hover {
    border-color: black;
    ${tw`text-black`}
  }
`;
const Input = ({ hasHover }) => (
  
);

还可以使用 tw 导入来创建和设置新组件的样式：

import tw, { styled } from 'twin.macro';
const StyledInput = styled.input(({ hasBorder }) => [
  `color: black;`,
  hasBorder && tw`border-purple-500`,
]);
const Input = () => ;

在 Github 上，Twin 已经有超过 7.2k 的 star ，每周的平均下载量达到了 276k。目前有超过 10.9 k 的项目使用 Twin、是妥妥的前端明星项目。

Fela

Fela 是一个小型、高性能且与框架无关的工具，用于处理 JavaScript 中的状态驱动样式。Fela 在设计上是动态的，允许根据应用程序状态渲染样式。

Fela 生成原子 CSS 并支持所有常见的 CSS 功能，例如：媒体查询、伪类、keyframes 和字体。 Fela 附带一个强大的插件 API ，例如：供应商前缀或回退值（fallback value）支持。

Fela 可以与 React 或任何其他视图库一起使用。它甚至支持 React Native。

假如有如下代码：

import { createRenderer } from 'fela';
// 简单的样式规则是状态的纯函数
// 返回样式声明的对象
const rule = (state) => ({
  textAlign: 'center',
  padding: '5px 10px',
  // 直接使用状态来计算样式值
  fontSize: state.fontSize + 'pt',
  borderRadius: 5,
  // 深度嵌套媒体查询和伪类
  ':hover': {
    fontSize: state.fontSize + 2 + 'pt',
    boxShadow: '0 0 2px rgb(70, 70, 70)',
  },
});
const renderer = createRenderer();
// fela 生成原子 CSS 类以实现
// 最大的样式重用和最小的 CSS 输出
const className = renderer.renderRule(rule, {
  fontSize: 14,
}); // =>  a b c d e f

通过 Fela 编译后的 CSS 结果如下所示：

.a { text-align: center }
.b { padding: 5px 10px }
.c { font-size: 14pt }
.d { border-radius: 5px }
.e:hover { font-size: 16pt }
.f:hover { box-shadow: 0 0 2px rgb(70, 70, 70) }

在 Github 上，Fela 已经有超过 2.2k 的 star ，每周的平均下载量达到了 26k。目前有超过 4.1 k 的项目依赖量、是值得长期关注的前端明星项目。

本文总结

本文主要为大家介绍2023 年最受欢迎的 10 大 CSS-in-JS 库，其中针对部分 CSS-in-JS库后面会单独出文介绍，可以随时保持关注。因为篇幅有限，文章并没有过多展开，如果有兴趣，文末的参考资料提供了优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://github.com/styled-components/styled-components

https://stackdiary.com/css-in-js-libraries/

https://github.com/css-modules/css-modules

https://github.com/vercel/styled-jsx

https://github.com/cssinjs/jss

https://github.com/styled-system/styled-system

https://github.com/vanilla-extract-css/vanilla-extract

https://github.com/callstack/linaria

https://github.com/ben-rogerson/twin.macro

https://github.com/robinweser/fela

2023 年最受前端欢迎的 10 大 CSS-in-JS 库!

styled-components

CSS Modules

Styled JSX

Emotion

JSS

Styled System

vanilla-extract

Linaria

Hello world

Twin

Fela

本文总结

参考资料

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿