「译文」：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 (
          <Wrapper> <Title>Hello Styled Components!</Title> </Wrapper>
        )
    }
}

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节点，以下所示：

<span style="color: green">inline style</span>
复制代码

1.2 CSS-in-JS如何工做？

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

<style> .jss-xxx-green{ color: green } </style>

<span class='jss-xxx-green'>inline style</span>
复制代码

1.3不一样点：

看到细微的区别？ CSS-in-JS在DOM的顶部附加了一个<style>标记，而内联样式只是将属性附加到DOM节点。 为何这很重要？

并不是全部CSS功能均可以使用JavaScript事件处理程序。 许多伪选择器（如：disabled，：before，：nth-child）是不可能的，不支持样式化html和body标签等。

使用CSS-in-JS，您能够轻松得到CSS的全部功能。 因为生成了实际的CSS，所以您可使用您能想到的每一个媒体查询和伪选择器。 一些库（如jss，样式组件）甚至添加了对嵌套的整洁，非CSS原生特性的支持！

为何咱们不使用CSS-in-CSS并完成它？

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

CSS实际上从未实现过基于组件的方法。 CSS-in-JS正好解决了这个问题。

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

• 组件化思考。你再也不须要维护一堆样式表。 CSS-in-JS将CSS模型抽象到组件级别，而不是文档级别（模块化）。
• CSS-in-JS利用JavaScript生态系统的所有功能来加强CSS。
• 真正的规则隔离。 范围选择器是不够的。 若是没有明肯定义，CSS具备从父元素自动继承的属性。 感谢jss-isolate插件，JSS规则不会继承属性。
• 范围选择器。 CSS只有一个全局命名空间。 在非平凡的应用程序中不可能避免选择器冲突。 命名约定（如BEM）可能在一个项目中有所帮助，但在集成第三方代码时无效。 当JSS将JSON表示编译为CSS时，JSS默认生成惟一的类名。
• 自动添加前缀。CSS规则自动以provider为前缀，所以您没必要考虑它。
• 代码共享。轻松地在JS和CSS之间共享常量和函数。
• 只有屏幕上当前使用的样式位于DOM（react-jss）中。
• 消除未使用代码
• CSS单元测试

3.使用CSS-in-JS的缺点是什么？

• 学习曲线
• 新的依赖
• 让新队友更难适应代码库。 不熟悉前端的人必须学习更多东西。
• 挑战现状（不必定是骗局）。

优点明显超过了利弊 - 让咱们给JS-in-JS一个机会！

4. 最受欢迎的CSS-in-JS库

全部流行的CSS-in-JS库的快速“Hello World”示例。 根据语法选择您最喜欢的一个。

• Styled Components
• JSS-React
• Glamorous
• Radium (Caveat: Uses Inline Styles)
• Aphrodite
• Styletron

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

结论和资源

我相信CSS-in-JS应该有机会。 但愿这篇文章对你有所帮助，并感谢阅读！

深刻阅读请移步：

• CSS in JS: Benefits, Drawbacks, and Tooling
• awesome-css-in-js