原文链接：https://medium.com/better-programming/all-you-need-to-know-about-css-in-js-984a72d48ebc

样式组件化，你将不需要在维护一堆样式表,CSS-in-JS将CSS模型抽象到组件级别，而不是文档级别（模块化）。

样式组件化示例

你可能听过像CSS-in-JS，Styled Components这样的术语，你就会想到，“为什么这与我有关？我对CSS-in-CSS（.css中的CSS）非常满意。”

我在这里要阐明为什么这是相关的，希望我们至少能理解这个概念，并理解为什么它是相关的。话虽如此，请随意使用CSS-in-CSS。您没有义务使用CSS-in-JS。无论什么最适合你，让你快乐，总是能够提供最好的解决方案！

CSS-in-JS是一个微妙而有争议的话题。我主张开放的思想，并考虑这是否对你有意义。问问自己，“它会改善我的工作流程吗？”最后，唯一重要的是使用能让你更快乐，更高效的工具。

我总是觉得难以维护一个巨大的样式表文件夹。我想尝试不同的方法。我见过很多人问是否有新的造型想法。到目前为止，CSS-in-JS是最好的概念。

让我们给一个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 <style>在DOM的顶部附加了一个标记，而内联样式只是将属性附加到DOM节点。

为什么这很重要？

并非所有CSS功能都可以使用JavaScript事件处理程序。许多伪选择（如:disabled，:before，:nth-child）是不可能的，在造型html和body标签不支持，等等。

使用CSS-in-JS，您可以轻松获得CSS的所有功能。由于生成了实际的CSS，因此您可以使用您能想到的每个媒体查询和伪选择器。有些库（比如jss，styled-components）甚至添加了对嵌套的纯CSS非原生特性的支持！

为什么我们不使用CSS-in-CSS并完成它？

虽然长期以来一直如此，但挑战在于现代网络是用组件而不是页面编写的。

CSS实际上从未实现过基于组件的方法。CSS-in-JS正好解决了这个问题。尽管Vue的样式无法访问组件状态，但希望Vue能解决此问题。

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

面向组件——不再需要维护一大堆乱糟糟的样式，CSS-in-JS 在组件层面（而不是文档层面）对 CSS 进行了抽象。
CSS-in-JS 利用 JavaScript 生态系统的强大能力来增强 CSS。
“真正的规则隔离”——对选择器定义作用域还远远不够。如果没有显式定义，CSS 的属性就会自动继承自父元素，而使用 jss-isolate 插件就可以防止 JSS 规则继承属性。
选择器作用域——CSS 只有一个全局的命名空间，所以是无法避免出现选择器冲突的。或许 BEM 这样的命名规范对单个项目来说能起到作用，但要与第三方代码集成时就不一定了。JSS 在将 JSON 编译成 CSS 时会自动生成唯一的类名。
浏览器引擎前缀——CSS 规则自动添加了浏览器引擎前缀。
代码共享——在 JS 和 CSS 之间共享常量和函数。
只生成页面会用到的样式。
移除无效代码。
CSS 单元测试。

CSS-in-JS 的不足

学习曲线。
新的依赖。
新手难以将其应用在项目中，他们需要学习更多的东西。
挑战现有标准（这个其实算不上是个缺陷）。

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

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

所有流行的CSS-in-JS库的示例。根据语法选择您最喜欢的一个。

Styled Components

import React, { Component } from 'react';
import styled from 'styled-components';
const Title = styled.h1`
 color: white;
`;

const Wrapper = styled.div`
 background: black
`
class App extends Component {
 render() {
 return (
 <Wrapper>
 <Title>Hello World!</Title>
 </Wrapper>
 );
 }
}
export default App;

JSS-React

import React from 'react'
import injectSheet from 'react-jss'
const styles = {
 wrapper: {
 background: 'black'
 },
 title: {
 color: 'white'
 }
}
const App = ({classes}) => (
 <div className={classes.wrapper}>
 <h1 className={classes.title}>
 Hello JSS-React!
 </h1>
 </div>
)
export default injectSheet(styles)(App)

Glamorous

import React from 'react'
import glamorous from 'glamorous'
const Wrapper = glamorous.div({
 backgroundColor: 'black'
})
const Title = glamorous.h1({
 color: 'white'
})
const App = () => (
 <Wrapper>
 <Title> Hello JSS-React!</Title>
 </Wrapper>
)
export default App;

Radium (Caveat: Uses Inline Styles)

import React, { Component } from 'react';
import Radium from 'radium';
@Radium // decorator
class App extends Component {
	render() {
 const styles = {
 wrapper: {
 background: 'blue',
 }
 title: {
 color: 'white'
 }
 };
		return (
 <div style={styles.wrapper}>
 <h1 style={styles.title}>Hello Radium!</h1>
 </div>
		);
	}
}
export default Radium(App);

注意：Radium使用装饰器！

Styletron

import React, { Component } from 'react';
import { styled } from 'styletron-react';
const Wrapper = styled('div', {
 backgroundColor: 'black'
})
const Title = styled('h1', {
 color: 'white'
})
class App extends Component {
 render() {
 return (
 <Wrapper>
 <Title>Hello Styletron!<Titleh1>
 </Wrapper>;
 )
 }
}

这些是非常简单的示例，展示了核心功能。所有库都包含更多功能，例如主题，动态道具，服务器端渲染等等。

我相信CSS-in-JS应该潜力。希望这篇文章对你有所帮助，并感谢阅读！

四时宝库

程序员的知识宝库

所有你需要了解的CSS-in-JS（css相关知识）