你需要知道的 CSS-in-JS

什么是 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 ？

JSS 对 CSS 进行了抽象，使用了 JavaScript，以声明和可维护的方式来描述样式。它是一个高性能、运行在服务器端的运行时 JS 到 CSS 编译器。它的核心部分与框架无关，经过压缩后只有 6KB，并可以通过插件 API 的方式进行扩展。

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

内联样式

 
const textStyles = {

   color: white,

 
   backgroundColor: black
}
 
<p style={textStyles}>inline style!</p>

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

 
<p style="color: white; backgrond-color: black;">inline style!</p>

CSS-in-JS

 
import styled from 'styled-components';
 
const Text = styled.div`

   color: white,

   background: black
`
 
<Text>Hello CSS-in-JS</Text>

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

 
<style>
.hash136s21 {

 
   background-color: black;

 
   color: white;
}
</style>
 
<p class="hash136s21">Hello CSS-in-JS</p>

可以看出，CSS-in-JS 会附加整个