CSS-in-JS库为我们提供了一种编写CSS的新方法。 他们旨在解决CSS的局限性，例如缺乏动态功能，作用域和可移植性。 尽管CSS-in-JS具有很多优点，但它还是一项有争议的技术，因为许多开发人员都在问这是否值得进一步简化前端开发。
本文旨在为您提供CSS-in-JS库的高级概述。 我们将研究这些库如何工作，它们解决了哪些问题以及如何决定是否应使用它们。
什么是CSS-in-JS？
自从基于组件JavaScript框架出现在前端开发以来，CSS-in-JS库就开始受到关注。 Angular，React，Vue和其他框架均基于称为“组件”的模块，您可以从中构建整个单页应用程序（SPA）。 组件通常是UI元素，例如按钮，弹出窗口或导航栏。 您只需要创建一个组件，就可以在应用程序中的任何上下文中重用它。
但是，您应该如何有效地设置SPA组件的样式？ 如果使用全局CSS文件，则很难确定最终结果。 由于CSS（ 级联样式表）的级联性质，样式表可以按任何顺序加载并可以任何组合相互替代。 管理SPA样式时，依赖关系是另一个问题。 如果在常规网站上使用依赖项管理时比较困难，那么使用模块化Web应用程序来处理一定程度的复杂性几乎是不可能的。
精心设计CSS-in-JS库可以解决所有这些问题。 实际上，JS-in-JS是一个JavaScript库，它将每个JavaScript组件及其所有相关CSS规则和依赖项捆绑在一起。 结果，组件可以独立运行，而无需依赖任何外部CSS文件。 这是Styled Components库的共同创建者Max Stoiber在他的出色博客文章中解释CSS-in-JS库如何工作的方式：
“三年来，我一直在样式化没有任何.css文件的Web应用程序。 相反，我用JavaScript编写了所有CSS。 ...我可以添加，更改和删除CSS，而不会产生任何意外后果。 我对组件样式的更改不会影响其他任何内容。 如果删除组件，则也会删除其CSS。 不再有仅附加样式表！” – Max Stoiber
我认为这句话很好地总结了这项技术。 使用CSS-in-JS库，您可以在.js文件中编写所有CSS，以便它们可以用作JavaScript模块。
CSS-in-JS库的示例
尽管每个CSS-in-JS库都具有相同的目的（即将组件与CSS捆绑在一起），但是每个库都具有稍微不同的功能和语法。 让我们看看最流行CSS-in-JS库是如何相互堆叠的。
特定于框架的与框架无关的
有些库仅适用于特定JavaScript框架。 例如，已经为React应用程序创建了Radium ，而Styled JSX仅支持以JSX编写的组件（可以在有和没有React的情况下使用）。
特定于框架CSS-in-JS库使用与其支持的框架相同的语法。 例如，样式化JSX在JSX语法中使用模板文字来向组件添加CSS样式。 以下代码（来自Styled JSX的GitHub docs ）创建了两种类型的按钮，常规按钮和大按钮：
const Button = (props) => (
<button className={ 'large' in props && 'large' }>
{ props.children }
<style jsx>{`
button {
padding: 20px;
background: #eee;
color: #999
}
.large {
padding: 50px
}
`}</style>
</button>
)
/* Creates a regular button */
<Button>Hi</Button>
/* Creates a large button */
<Button large>Big</Button>其他CSS-in-JS库（例如JSS ， Emotion和上述样式化组件）与框架无关。 因此，您可以将它们与任何基于组件的框架，纯JavaScript一起使用，其中某些组件（例如Aphrodite）也可以与Web组件一起使用。
要了解与框架无关CSS-in-JS库在现实生活中的外观，您可以尝试JSS的在线游乐场，或从Aphrodite的GitHub docs中查看以下Web组件示例：
/* Registers a Web Component with red background */
import { StyleSheet, css } from 'aphrodite';
const styles = StyleSheet.create({
red: {
backgroundColor: 'red'
}
});
class App extends HTMLElement {
attachedCallback() {
this.innerHTML = `
<div class="${css(styles.red)}">
This is red.
</div>
`;
}
}
document.registerElement('my-app', App);唯一选择器与内联样式
为了处理范围，大多数CSS-in-JS库（例如JSS，Emotion和样式化组件）会自动为每个组件生成唯一的选择器。 要亲自查看，可以访问样式化组件的主页，并使用浏览器的开发人员工具检查示例之一。 例如，我已经使用Firefox DevTools检查了粉红色的"I'm a styled <Button />"鬼按钮：
如您所见，“样式化组件”已生成两个唯一的类，一个类名为components__SecondButton-sc-1gmolv7-3 fWxBIM ，另一个类名为components__AlignCenter-sc-1gmolv7-0 hjdyfl 。
尽管这是创建绝对不会导致任何CSS特殊性问题的绝对唯一选择器的好方法，但是源代码看起来并不漂亮。 另外，某些CSS-in-JS库（例如Radium）会在HTML中动态添加内联CSS，而不是生成唯一的类。
后一种方法不仅可以提高HTML代码的可读性，而且还具有其他优点，例如更好的性能，源代码顺序独立性和消除无效代码。 但是，使用内联样式也有一些缺点。 根据Radium的文档 ：
“尽管如此，内联样式还是无法轻松适应一些常见CSS功能和技术：媒体查询，浏览器状态（：hover，：focus，：active）和修饰符（不再有.btn-primary！）。 Radium提供了用于解决这些问题的标准接口和抽象。”
所以，这就是权衡。 根据您的需求，您可以决定哪种方法更适合您。
独特的功能
CSS-in-JS库不仅在语法，框架支持和范围处理方面有所不同，而且每个库都有独特的功能，这些功能不一定包含在其他库中，例如：
- 全局选择器
- 基于状态的样式，
- 客户端与服务器端渲染（或两者），
- 缓存
- 源地图，
- 内置自动前缀
- 媒体查询
- 选择器嵌套
- 内置的动画支持
- 其他插件和软件包，
- 和别的。
尽管大多数库都附带了很好的文档，但这是Michele Bertoli 的比较表 ，其中包含多个CSS-in-JS库的最重要功能。
CSS-in-JS的优点
现在，让我们讨论一下CSS-in-JS库的优点（即使我已经提到了其中的一些）。
本地范围
默认情况下，CSS不允许本地作用域。 每个样式规则都有一个全局范围，因此它适用于整个项目。 结果，样式可以以令人惊讶的方式彼此替代。 前端开发人员已经创建了多种方法来为CSS添加模块化，例如BEM，OOCSS和SMACSS。 预处理器和PostCSS是模块化CSS的另一种方法。 CSS-in-JS库通过自动范围界定将这一概念提升到一个新的水平，这带来了较高的可预测性。
封装形式
封装的组件隐藏了实现的细节。 它们仅将API公开给外界，以便其他组件可以与其交互。 封装可以简化维护并消除错误，因为您可以在同一位置修改所有与组件相关的代码，而不必担心意外更改应用程序的其他部分。
可移植性
由于组件包括正确运行所需的所有源代码，样式和逻辑，因此您可以安全地移动它们。 它们基本上是开箱即用的，并允许您创建松耦合的应用程序，其中组件仅通过API相互通信。
可重用性
组件是可重用的，因此您只需编写一次即可，然后可以在任何地方运行它们。 您不仅可以重用同一应用程序中的组件，而且还可以重用以相同框架构建的其他应用程序中的组件。
动态功能
由于CSS-in-JS本质上是JavaScript代码，因此您可以将复杂的逻辑应用于样式规则，例如循环，条件，变量，基于状态的样式等。 因此，如果您需要创建需要动态功能的复杂UI，则它是理想的解决方案。
CSS-in-JS的缺点
尽管CSS-in-JS库允许您以逻辑高效的方式构建基于组件的应用程序，但是它们还具有一些使您警惕的特征。
学习曲线
CSS-in-JS绝对有一个学习曲线，尤其是如果您以前没有使用基于组件的框架或Web组件。 除了学习新的语法外，您还需要选择一种新的思维方式，这需要时间，并且可能会暂时减慢您的开发流程。
额外的复杂性
使用CSS-in-JS库会为您的前端堆栈增加一个额外的层，有时这是不必要的。 尽管CSS-in-JS出色地管理了复杂性，但并不总是值得为此烦恼，尤其是在项目较简单的情况下。
代码可读性
自动生成的选择器会大大降低代码的可读性。 如果您经常使用浏览器的开发人员工具进行调试，对于初学者来说，这可能是一个巨大的问题，因为对于他们来说，理解他们编写的代码至关重要。
因此，什么时候应该使用CSS-in-JS库？
CSS-in-JS库为您提供了一种简单而安全的方法来对基于组件的应用程序进行样式设置。 除了JavaScript框架，您还可以将它们与Web组件一起使用。 如果您要为单片前端创建复杂的UX（例如基于状态的功能），它们也可以派上用场。
另一方面，如果您是新手开发人员，想创建没有动态前端的网站或者欣赏简单性和代码可读性，那么CSS-in-JS可能不适合您。 您可能会合理地发现，诸如Sass或PostCSS之类的入门工具非常适合您的目标，并且您不想为了新颖就选择新技术。