css-in-js 从饱受争议到慢慢成为组件库的主流方案

css-in-js 是什么

开始前端流行 css html js 分开写，各自负责自己擅长的样式、结构、行为，这叫关注点分离 ，react 出来后，推出jsx ，在js 中写html ，这样结构和行为都由js处理。React 对 CSS 封装非常简单，就是沿用了 DOM 的 style 属性对象。开始在react 生态中有各种css 集成的方案，css-in-js 是其中一种，开始提出时饱受争议，到现在眼看成为了主流。

css in js 是这样写的

import { makeStyles } from '@griffel/react';

const useClasses = makeStyles({
  icon: { color: 'red', paddingLeft: '5px' },
});

function Component() {
  const classes = useClasses();

  return <span className={classes.icon} />;
}

有几个用主流的组件库，都在用 css in js 方案。

使用 css-in-js 方案的组件库

Ant Design

Ant Design 5.0 版本从使用了很久的less 切换到 css-in-js 方案，当时引起很多人的讨论，大家都认为 css-in-js 的方案增加了渲染任务，会影响组件的渲染性能。

ant-design-vue

Ant Design Vue 从4.0版本，样式集成方案也切换到 css-in-js。 ant-design-vue 是使用比较广泛的 vue 框架的组件库，代表vue 生态中也有一部分组件库也开始使用 css-in-js 方案。

MATERIAL-UI（Material Design React）

Material Design 谷歌的安卓设计规范，谷歌官方实现了Angular 框架的 Material Design 组件库，MATERIAL-UI 是react.js 社区版的组件库。

6.0 版本之前的样式方案

新版本样式方案

fluentui （fluent design react） 组件库

fluentui 是微软按照自己的设计系统 Fluent design 实现的react 版本。

fluentui 的 css-in-js 方案是微软自己造的一个新轮子 griffel。

参考：

阮一峰 css in js
Material-UI
Ant design v5
fluentui repo
Fluent UI React v9