什么是CSS-in-JS？直接在.css文件里写CSS（CSS-in-CSS）不是挺好的吗，为什么还需要CSS-in-JS？

说到这里，不得不提到组件化。因为有了组件化概念，就不再需要维护一大堆杂乱的样式。CSS-in-JS在组件层面（而不是文档层面）对CSS进行了抽象。在项目中维护一个巨大的样式文件夹实在是一件让人感到头疼的事情，很多人不禁感叹，是否还有其他更好的办法？不用说，CSS-in-JS在目前看来就是一个最佳解决方案。

当然，要继续使用CSS-in-CSS还是转向CSS-in-JS完全取决于开发者自己，最关键的是选择合适的工具来改进开发工作流，在提升生产力的同时也让开发变得更有趣。

什么是CSS-in-JS？

需要注意的是，内联样式和CSS-in-JS是完全不一样的！

内联样式

在浏览器里，样式属性会被附加到DOM节点上：

CSS-in-JS

在浏览器里，样式类会被附加到DOM节点上：

可以看出，CSS-in-JS会附加整个<style>标签的内容，而内联样式只会把属性附加到DOM节点上。

这有什么实际意义？

并不是所有的CSS特性在java script里都有与之对应的事件处理器，很多伪类选择器（如:disabled、:before、:nth-child）是不受支持的，当然也不支持在html和body标签上应用样式。

而CSS-in-JS可以发挥CSS所有的特性，因为它会生成实际的CSS，这也就可以使用任意的选择器。一些包（如jss、styled-components）甚至支持嵌套！

使用CSS-in-JS有什么好处？

CSS-in-JS的不足

但从总体上看，优势还是远远盖过它的缺点。

最为流行的几个CSS-in-JS框架

Styled Components

JSS-React

glamorous

Radium

Aphrodite

Stylotron