「译文」：CSS-in-JS 你所应该知道的一切

CSS-in-JS 你所应该知道的一切

用组件的方式进行思考 - 你不再需要维护一堆样式表。 CSS-in-JS将CSS模型抽象到组件级别，而不是文档级别（模块化）。

---

React 组件示例：

import React, { Component } from 'react'
import styled from 'styled-components'

const Wrapper = styled.div`
    background: black
  `
const Title = styled.h1`
    background: white
  `
class App extends Component {
    render() {
        return (
          
            
          
        )
    }
}

export default App

---

你很可能听过像CSS-in-JS, Styled Components,Radium, 和Aphrodite，你可以也会想，这和我有什么关系？我非常乐于写CSS-in-CSS(纯.css文件)。

我来说一下这些为什么和你有关，希望至少能懂得概念，了解为什么和你有关。话虽如此，请随意使用CSS-in-CSS。你没有义务使用CSS-in-JS。无论什么最适合你，让你很爽，总是能够提供最好的解决方案！

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

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

让我们一起看下CSS-in-JS:

中小型项目的 CSS

---

1.什么是CSS-in-JS？

JSS是一种比CSS更强大的抽象。 它使用JavaScript作为语言以声明和可维护的方式描述样式。 它是一个高性能的JS到CSS编译器，它在运行时和服务器端工作。 这个核心库是低级别和框架无关的。 它大约是6KB（缩小和压缩），并且可以通过插件API进行扩展。 - 来源

一定要铭记，行内样式和CSS-in-JS完全不同，如下图所示：

1.1 行内样式如何工作？

在浏览器中，这将附加到DOM节点，如下所示：

inline style

1.2 CSS-in-JS如何工作？

在浏览器中，这将附加到DOM节点，如下所示：

inline style

1.3不同点：

看到细微的区别？ CSS-in-JS在DOM的顶部附加了一个