CSS in JS

CSS in JS这个命题，是在内部小组的一个简单分享，现在单独拿出来整理一下。

自React流行以来，混写HTML和JS乃至CSS的做法变成日常，虽然CSS在react里只有一个简单JS实现，但只用JS解决所有问题的思路也逐渐为人们所接受。在过往的数年中，各种CSS in JS的框架也层出不穷，这里简单梳理一下，毕竟自己也是个和CSS有着相当缘分的人:)

CSS & CSS in JS

CSS最初被设计为简单直观的描述性DSL，10年前甚至部分是有设计师直接使用的。不过web的持续发展不可避免的让前端细分到技术领域，我也算是一路看着CSS各种演变，从最开始的避免多类简单直接，到有多类，有原子化描述，有CSS-reset，Normalise，Minimum Page，到模块化的BEM管理，组件化的样式编写流程，语义化的组件范式，到bootstrap流行的时候达到了巅峰。

但CSS天生简单，毕竟是特型化的DSL，且设计之初就没打算搞复杂。这是的全局命名污染和冲突这一点成为无法略去之痛。现今的CSS in JS方案主要解决了这些问题：

全局命名冲突
直观的开发体验
动态样式(样式根据数据变化)

特别是匹配上react这类all in js的解决路数，相当干脆的感觉。不过CSS in JS解决了某些问题，却也带来了另一些问题：

性能损耗(运行时和SSR抽取)
SSR抽取样式会影响引用资源的上下文
类名的语义化效果消失
资源引用变为JS使得情况更为复杂

所以，基于上面这些问题，CSS in JS更像是CSS本身的补充。对于后台系统而言可能能达到替代的程度，因为后台并不需要SSR，并不关系语义，也往往不去不分资源的Host。

主流框架的做法

Ant Design (The world's second most popular React UI framework)，号称是全球第二流行，颇有当年锤子自称全球第二好用的意味。它所使用样式系统是LESS，基本上作为一个团队的产品，在严格的管控下毫无问题。当然使用的人必须接受这种设定。加载antd会污染全局样式，特别是影响广泛的字体设定和box-sizing值。当然对大部分人来说也不是太大问题。

既然有世界第二，那么就有世界第一。

Material-UI (The world's most popular React UI framework)，也是我打交道非常多的UI，我是一路看着它的样式系统不停修改过来的：

起初使用的是LESS
之后走了一条inline style覆盖计算的路子，但最近验证存在性能问题
1.0的时候，开发团队评估了现存CSS in JS方案，最终从Jss, Aphrodite, CSS modules, styled-components, Fela一众后选中，选定JSS，看重的是其性能和各方面的能力
如今已经已经基于JSS实现了styled-components API及Hook API，已经渐渐形成自己的一套CSS解决方案@mui/style，目前还是alpha状态

可见业界的各种探索也并未停歇。