浅谈CSS-in-JS

前言

在前端发展进程中，css主要有如下几种组织方案：

1.CSS与JS完全解耦，运用预处理器或编码规范（如BEM命名规范）来保持其可维护性。

2.CSS Modules(本质上是在编译过程中运用哈希等方式进行命名随机化，避免全局命名冲突)

3.CSS-in-JS

4.单文件绑定CSS（如Vue中的scope语法，在编译时进行分析，使得和此组件绑定的css只影响当前组件。）

去谈一种方案总是不能离开场景，传统的静态页面切换中，运用传统的CSS方案是可行的，但是随着SPA理念的流行以及组件化开发方式的普及，传统的CSS方案在维护上会渐渐显示出弱点。而在React社区中，CSS in JS被提及的次数很多。

CSS-in-JS是什么

笔者看到的一个比较好的定义：

CSS-in-JS是一种技术（technique），而不是一个具体的库实现（library）。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些.css，.scss或者less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。

CSS-in-JS的好处探讨

1.作用域

许多实现库通过不同的方法解决了css作用域的问题，避免全局css污染（笔者认为这一点和CSS Modules、Vue的scope语法所希望解决的问题一致）

2. SSR首屏渲染

css in js有运行时的概念，在此过程中可以做很多优化的事情。例如，在服务端首屏渲染中有一个问题，当首页html直出时，会发现css在html之前或之后载入都会有一些尴尬的问题（在之后，则会使用户看到没有css的页面，在之前，则会面临css体积过大的问题）因此有人提出了Critical CSS的概念，指的是只和首屏相关的最小CSS集合。因此侦测和收集渲染时需要的css（首屏渲染时即又称为Critical CSS）尤为重要。css in js自带的运行时性质可以比较好地解决这个问题。

关于这个问题也有其他解决方案：例如单文件组件的编译过程中，在组件生命周期中插入css(Vue就是这样做的)

3.原子类css

一些css-in-js库会自带原子类css优化，即把一些css代码中共享的类拆出，使得css可压缩性更好。（但是笔者认为，这种方式主要在于设计模式上的优化，即享元模式，并非css-in-js的绝对优势。）

4.跨平台复用  

js在做跨平台时有优势，不过，也有人指出可以把静态css编译成js，再进行动态style绑定，进行跨平台复用。（如Weex的做法）

（完）