一、前言
对于现代化的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 节点，如下所示：
行业样式在浏览器中的DOM节点
2、CSS-in-JS如何工作？
附加到浏览器中的DOM 节点，如下所示：
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并不是一颗能完美解决样式维护难题的银弹，但是通过借助一定最佳实践后，足以应对大多数前端需求，比如主题切换、组件样式封装、用户端样式覆盖等等，并显著提升前端团队在维护样式时的工作效率。
来源：【鹏信科技】头条号
网友评论