关于CSS-in-JS：使用及优缺点

一、前言

对于现代化的Web开发项目来说，CSS提供了一个大胆的想法和尝试。纵观前端发展历程，CSS 主要有如下几种组织方案：

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

2、CSS Modules（如 Webpack 中的 css-loader），本质上是在编译过程中运用哈希等方式进行命名随机化，避免全局命名冲突。

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

4、CSS-in-JS（如 styled-components、@emotion/react）。

在传统的静态页面切换中，运用传统的 CSS 方案是可行的，但是随着 SPA（单页应用程序）理念的流行以及组件化开发方式的普及，传统的 CSS 方案在维护上会渐渐显示出弱点。自从基于组件的 JavaScript 框架出现在前端开发中以来，CSS-in-JS 一直在获得关注。

二、什么是 CSS-in-JS

顾名思义，CSS-in-JS 允许通过直接在 JavaScript（JS）或 TypeScript（TS）代码中编写 CSS 来设置样式。

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

另外，行内样式和 CSS-in-JS 完全不同，如下所示：

1、行内样式如何工作？

附加到浏览器中的 DOM 节点，如下所示：

2、  CSS-in-JS 如何工作？

附加到浏览器中的 DOM 节点，如下所示：

 3、不同点

CSS-in-JS 在 DOM 的顶部附加了一个 <style> 标记，而行内样式只是将 style 属性附加到 DOM节点上（附加 style 属性可以通过 JS 实现），这是因为并非所有 CSS 功能都可以使用 JS 附加行内样式属性实现，许多伪选择器（如 :disabled、:before、:nth-child 等）是不能实现的。

使用 CSS-in-JS，可以拥有 CSS 的所有功能。由于生成了实际的 CSS，可以使用我们能想到的每个媒体查询和伪选择器，一些实现库甚至添加了非 CSS 原生特性的支持的嵌套语法。

三、CSS-in-JS 优势

1、组件化思考模式，不再需要维护一堆样式表。CSS-in-JS 将 CSS 模型抽象到组件级别，而不是文档级别（模块化）。

2、CSS-in-JS 利用JS环境的全部功能来增强CSS。

3、真正的选择器隔离，范围选择器是不够的，CSS具有从父元素自动继承的属性（如果未明确定义）。

4、CSS要避免选择器冲突，例如 BEM 之类的命名约定可能在一个项目中有所帮助，但在集成第三方代码时则会存在很多问题。使用 CSS-in-JS时，默认情况下会生成唯一的类名。

5、动态浏览器私有化前缀，使用 CSS-in-JS 可以避免臃肿的 CSS 代码。

6、代码共享，轻松在 JS 和 CSS 之间共享常量和函数。

7、只有屏幕上当前使用的样式位于 DOM 中。

8、CSS单元化测试。

9、支持TS语法。

10、减少项目编译的依赖，纯JS或TS项目。

11、动态变化的主题和变量。

四、CSS-in-JS 劣势

1、CSS-in-JS 标准和规范不统一，增加不同实现的学习成本，也增加项目重构的难度。

2、增加运行时开销。

3、增加构建后产物体积。

4、使 React DevTools 变得混乱，debug 时可读性变差。

五、结语

CSS-in-JS 有好处也有坏处，在日常工作中要根据自己的实际情况进行衡量和取舍，以此来确定是否要在项目中使用它。

与其他技术方案一样，CSS-in-JS并不是一颗能完美解决样式维护难题的银弹，但是通过借助一定最佳实践后，足以应对大多数前端需求，比如主题切换、组件样式封装、用户端样式覆盖等等，并显著提升前端团队在维护样式时的工作效率。