CSS-in-JS

参照：
https://zhuanlan.zhihu.com/p/103522819
https://developer.aliyun.com/article/781882

介绍

CSS-in-JS是一种样式化技术，简单来讲就是将css写在javascript文件里，不独立使用.css、.less、.scss文件处理样式，这样CSS可以使用JS中的一些语句们比如模块声明、变量定义、函数调用等去灵活的扩展样式的定义。解析js文件的时候，会生成相应的css，并插入到dom中

出现原因

component-based的web框架（React、Vue、Angular）逐渐流行，开发者想要将样式也封装到组建中去，以解决原生css写法的一系列问题

CSS-in-JS不同实现

实现了CSS-in-JS的库有很多，比较流行的有以下，但是每一种库的使用方式和代码写法不一样

• styled-components（热门）
• radium
• glamor
• emotion

• jss
  举个例子实现

  
  image.png

支持的功能（除了第一条，其余的都是不同的库部分支持功能）

• css局部作用域功能（全部支持）
• 自动生成浏览器引擎前缀
• 支持抽取独立的CSS样式表
• 自带支持动画
• 伪类
• 媒体查询

优缺点

优点

• 局部样式
• 避免无用css堆积
  重构或新功能开发修改时，因为html和css样式之间没有显示的一一对应关系，不好判断哪些时勿用代码，会造成css样式代码堆积
• 可以实现基于状态的样式定义
  eg：一个按钮颜色通过不同状态进行颜色变更，不使用CSS-in-JS，每次都要改动css和js文件（也有可能只改css，但是还有可能两个一起改），但是使用了后只需要改动js文件
• 封装更好的组件库
  当两个项目使用的css预处理不一样时，服用起来比较麻烦，但是CSS-in-JS是写在js中，直接使用npm install安装即可

缺点

• 陡峭的学习曲线
  需要学习component-based框架，再要学习某个CSS-in-JS的实现，还需要适应
• 运行时消耗
  1、服务器发给客户端的代码会包含使用到的CSS-in-JS代码，一般都不怎么小，（对首屏加载代码会有影响）
  2、客户端动态生成css，有一定的性能代价
• 代码可读性差
  CSS-in-JS会通过生成唯一css选择器来实现局部作用域的效果，这种自动生成的选择器，可读性不好，debug时会比较费劲儿
• 没有统一的业界标准
  各个CSS-in-JS库不管是功能还是语法都有很大差别，随着项目规模变大，想要更换CSS-in-JS会不好处理，因为差异性太大