css-in-js是什么？

当大家听到这个词或许能猜到是在js里面写编写css样式，可我们以前都是在html内或引用外部css文件样式，为什么现在可以在js里编写css样式呢？

先让我们看看“关注点分离”的概念，以前在开发前端项目里面，关注点分离是对只与“特定概念、目标”相关联的软件组成部分进行“标识、封装和操纵”的能力。

它代表标识、封装和操纵关注点的能力，是处理复杂性的一个原则。

由于关注点混杂在一起会导致复杂性大大增加，能够把不同的关注点分离开来，分别处理就是处理复杂性的一个原则，一种方法。

在前端开发的领域，把html、css、js分开成三个独立部分，方便维护，各自解耦，降低复杂度。

通俗的理解，css-in-js就是把css写进js。

即不写“行内样式”和“行内脚本”。

为什么用css-in-js？

相对于js的突飞猛进，css的进化就比较缓慢，随着前端react、vue等框架模块化概念的出现，改变了独立三个部分的局面。

html写到js里面，使html的弱化与js的强化成为了一种趋势，页面也被切分成一个个模块。

这时候对css来讲，独立打包似乎并不是那么的理所当然了，一个模块有它自己的html、js、css才是更好的切分页面功能的方式。

现在随着组件化概念的流行，css 的弱化与 js 的强化趋势也在慢慢形成，从组件层面维护css样式的需求日益增大。

css-in-js就是在组件内部使用js对css进行了抽象，可以对其声明和加以维护。这样不仅降低了编写css样式带来的风险，也让开发变得更加轻松。

css-in-js理念，即是摒弃原有的用.css文件书写样式，而把样式写进js里面，这样就可以做到一个组件对应一个文件、一个文件便是一个组件，一次开发公共使用的目的。

目前有很多基于css-in-js思想衍生出来的第三方库，如styled-components、emotion、jss、styled-jsx等等。