CSS-in-JS 简介

CSS的起源

花一点时间思考一下，网络作为应用程序平台的诞生是多么不可思议。1990年，蒂姆·伯纳斯-李编写了最初的网页服务器和浏览器时，网页仅使用一种语言：HTML。HTML只能表达原始内容，内容的呈现方式则完全由浏览器决定。随着时间推移，一些样式选项逐渐被加入到标记语言中。作者们开始用（常常非常刺眼的）颜色和字体来装饰他们的网站，更不用说那个臭名昭著的 <marquee> 标签了。直到1996年CSS的出现，网页设计师可选择的美学风格才真正爆发式增长。

就在CSS逐步取得进展的同时，JavaScript也开始为网页带来交互性。2004年Gmail的推出证明了构建能够媲美桌面应用的网页应用是可行的，并且具有明显优势：无需安装、即时更新、任何具备网络功能的设备都能访问。开发者纷纷涌入这一新平台。从那时起，网页的三种核心技术（HTML、CSS和JavaScript）共同演进，不断添加新特性以更好地协同工作。令人惊叹的是，尽管这三种语言最初都不是为开发应用程序而设计的，但它们的持续发展使网络平台能够与原生应用平台展开竞争。

CSS-in-JS

时间快进到今天。React通过允许开发者将页面结构表示为应用状态的函数，彻底改变了网页开发的方式。然而，CSS仍然基本保持静态。在遵循传统做法、将JavaScript与CSS分离的React应用中，为了根据应用状态应用CSS规则，必须引入一层间接机制。开发者需要编写React组件，根据其状态渲染带有特定类名的元素，然后为这些类名编写CSS规则来表达期望的样式。随着CSS规则数量的增长，开发者不可避免地会难以维持其组织性。当组件需要覆盖其所渲染的其他组件的样式时，问题更加严重——不同CSS规则之间的“优先级战争”就此爆发。

幸运的是，许多这些问题都有了解决方案。CSS-in-JS 是一个代表性范式，其典型代表就是广受欢迎的 styled-components 库。使用CSS-in-JS，你可以使用熟悉的CSS语法编写样式，但实际的样式规则会在运行时按需生成。这种方式在代码组织和可维护性方面带来了巨大优势。而且，对于本课程的主题而言，它还使得样式规则可以接受单元测试。

在本章中，你将使用 styled-components 为上一章的轮播组件添加样式。你将利用 Enzyme 对组件的样式进行断言，并借助 Jest 的快照功能捕获这些样式。但在开始添加样式之前，让我们先简要了解一下 webpack——这个连接你的组件与浏览器的关键工具。