1.Style-component 2.模块化css
- 好处
- 局部样式Scoping-styles： CSS有一个被大家诟病的问题就是没有本地作用域，所有声明的样式都是全局的（global styles）。而CSS-in-JS会提供自动局部CSS作用域的功能，你为组件定义的样式会被限制在这个组件，而不会对其他组件的样式产生影响。[2]
- 避免无用的css样式堆积： 进行过大型Web项目开发的同学应该都有经历过这个情景：在开发新的功能或者进行代码重构的时候，由于HTML代码和CSS样式之间没有显式的一一对应关系，我们很难辨认出项目中哪些CSS样式代码是有用的哪些是无用的，这就导致了我们不敢轻易删除代码中可能是无用的样式。这样随着时间的推移，项目中的CSS样式只会增加而不会减少(append-only stylesheets）。而因为CSS-in-JS会把样式和组件绑定在一起，当这个组件要被删除掉的时候，直接把这些代码删除掉就好了，不用担心删掉的样式代码会对项目的其他组件样式产生影响。而且由于CSS是写在JavaScript里面的，我们还可以利用JS显式的变量定义，模块引用等语言特性来追踪样式的使用情况，这大大方便了我们对样式代码的更改或者重构。[2]
- Critical CSS： 放在head标签内的CSS当然是越少越好，因为太多的内容会加大html的体积，所以我们一般把用户需要在首屏看到的（above the fold）页面要用到的最少CSS提取为Critical CSS。CSS-in-JS通过增加一点加载的JS体积就可以避免另外发一次请求来获取其它的CSS文件。而且一些CSS-in-JS的实现（例如styled-components）对Critical CSS是自动支持的。[2]
- 基于状态的样式定义：CSS-in-JS可以根据组件的状态动态地生成样式。[2]
- 封装的更好的组件库：如果CSS是写在JS里面的，项目想要使用封装的组件库只需要进行简单的npm install就可以了，非常方便。[2]
- 坏处
- 陡峭的学习曲线：首先CSS-in-JS是针对component-based的框架的，这就意味着要学习CSS-in-JS你必须得学习：component-based框架（例如React），JavaScript和CSS这三样技能。其次，即使你已经会用React，JavaScript和CSS来构建SPA应用，你还要学习某个CSS-in-JS实现（例如styled-components），以及学习一种全新的基于组件定义样式的思考问题方式。[2]
- 运行时消耗：由于大多数的CSS-in-JS的库都是在动态生成CSS的, 这就意味着会有一定的性能代价[2]
- 代码可读性差：大多数CSS-in-JS实现会通过生成唯一的CSS选择器来达到CSS局部作用域的效果。这些自动生成的选择器会大大降低代码的可读性，给开发人员debug造成一定的影响。[2]
- 没有统一的业界标准：CSS-in-JS只是一种技术思路而没有一个社区统一遵循的标准和规范，所以不同实现的语法和功能可能有很大的差异。[2]
Reference
