JS `CSS-in-JS` `Atomic CSS` 与 `Zero-Runtime CSS-in-JS` 编译时优化

各位观众，晚上好！我是今天的主讲人，很高兴能和大家一起聊聊前端圈里这几个听起来有点绕口，但实际上又非常有趣的概念：JS CSS-in-JS，Atomic CSS，以及 Zero-Runtime CSS-in-JS 的编译时优化。

咱们今天的内容，力求做到深入浅出，用大白话把这些技术背后的原理和应用场景讲清楚，争取让大家听完之后，不仅能理解它们是什么，还能知道什么时候该用它们，以及怎么用它们。

第一章：CSS-in-JS 的前世今生

要理解后面的概念，我们得先从 CSS-in-JS 说起。CSS-in-JS，顾名思义，就是把 CSS 写在 JavaScript 里面。

为啥要这么干？

传统的 CSS 开发，虽然历史悠久，但随着前端项目越来越复杂，它的痛点也逐渐暴露了出来：

全局命名空间污染： CSS 的类名是全局的，稍不注意就可能出现命名冲突，导致样式覆盖。
样式复用困难： 缺乏有效的组件化机制，导致样式复用很麻烦。
运行时依赖： CSS 文件需要单独加载和解析，增加了页面的加载时间。
动态样式处理困难： 很难根据组件的状态动态修改样式。

为了解决这些问题，CSS-in-JS 应运而生。它通过 JavaScript 来管理 CSS，带来了以下好处：

组件化： 可以将样式与组件紧密绑定，实现样式的局部化和封装。
动态样式： 可以方便地根据组件的状态动态生成样式。
可维护性： 提高了代码的可维护性和可测试性。

CSS-in-JS 的实现方式

CSS-in-JS 的实现方式有很多种，但大致可以分为以下几类：

内联样式 (Inline Styles): 这是最简单粗暴的方式，直接把样式写在 HTML 元素的 style 属性里。
```
const MyComponent = () => {
  return (
    <div style={{ color: 'red', fontSize: '16px' }}>
      Hello, world!
    </div>
  );
};
```
优点： 简单易用，优先级最高。

缺点： 缺乏复用性，不利于维护，不支持伪类和媒体查询。

动态样式对象 (Dynamic Style Objects): 通过 JavaScript 对象来定义样式，然后将这些对象应用到组件上。

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: ${props => props.primary ? 'darkblue' : 'darkgray'};
  }
`;

const MyComponent = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

优点： 可以方便地使用 JavaScript 变量和函数来动态生成样式，支持伪类和媒体查询。

缺点： 需要引入额外的库，运行时开销较大。

CSS Modules: 通过在构建过程中为 CSS 类名添加唯一的哈希值，来避免命名冲突。

// my-component.module.css
.container {
  color: red;
  font-size: 16px;
}

// MyComponent.js
import styles from './my-component.module.css';

const MyComponent = () => {
  return (
    <div className={styles.container}>
      Hello, world!
    </div>
  );
};

优点： 简单易用，与现有的 CSS 工具链兼容。

缺点： 仍然需要编写 CSS 文件，动态样式处理不够灵活。

CSS-in-JS 的代表性库

styled-components: 可能是最流行的 CSS-in-JS 库，它使用模板字符串来定义样式，并支持主题和动态样式。
emotion: 另一个流行的 CSS-in-JS 库，它提供了多种 API，包括 css prop 和 styled API。
JSS: 一个功能强大的 CSS-in-JS 库，它支持插件和主题，并提供了多种渲染器。
Radium: 主要用于 React，提供内联样式的增强功能，包括伪类和媒体查询的支持。但现在已经不太流行。

小结

CSS-in-JS 解决了传统 CSS 的一些痛点，但也引入了新的问题，比如运行时开销和学习成本。在选择 CSS-in-JS 方案时，需要权衡利弊，选择最适合自己项目的方案。

第二章：Atomic CSS 的思想

Atomic CSS，也叫原子化 CSS 或功能类 CSS，是一种与传统 CSS 编写方式截然不同的方法。它将 CSS 拆分成一个个小的、独立的、不可组合的原子类，每个类只负责定义一个 CSS 属性。

Atomic CSS 的核心思想

Atomic CSS 的核心思想是将样式拆分成最小的单元，并通过组合这些单元来实现复杂的样式效果。

Atomic CSS 的例子

<div class="ma-10 pa-20 fw-bold fs-16 tc-red">
  Hello, world!
</div>

在这个例子中，ma-10 表示 margin: 10px;，pa-20 表示 padding: 20px;，fw-bold 表示 font-weight: bold;，fs-16 表示 font-size: 16px;，tc-red 表示 text-color: red;。

Atomic CSS 的优点

减少 CSS 代码量： 通过复用原子类，可以避免重复编写相同的 CSS 属性。
提高开发效率： 可以快速组合原子类来实现所需的样式效果。
易于维护： 由于每个原子类只负责定义一个 CSS 属性，因此修改样式时只需要修改相应的原子类即可。
一致性： 强制使用预定义的原子类，保证了样式的一致性。

Atomic CSS 的缺点

HTML 代码冗余： 需要在 HTML 元素上添加大量的类名。
可读性差： 难以从类名中直接看出元素的样式效果。
学习成本： 需要学习原子类的命名规则和用法。

Atomic CSS 的代表性库

Tailwind CSS: 一个非常流行的原子化 CSS 框架，它提供了一套预定义的原子类，并支持自定义配置。
Tachyons: 另一个流行的原子化 CSS 框架，它注重性能和可维护性。
Basscss: 一个简单的原子化 CSS 框架，它专注于提供基础的样式构建块。

Atomic CSS 的适用场景

Atomic CSS 适用于以下场景：

大型项目： 可以有效地减少 CSS 代码量，提高开发效率。
设计系统： 可以保证样式的一致性，并提供一套可复用的样式组件。
性能敏感的项目： 可以减少 CSS 文件的体积，提高页面加载速度。

小结

Atomic CSS 是一种颠覆传统的 CSS 编写方式，它通过将样式拆分成最小的单元来实现样式的复用和组合。虽然它有一些缺点，但在合适的场景下可以带来很多好处。

第三章：Zero-Runtime CSS-in-JS 的编译时优化

现在，我们进入今天讲座的重点：Zero-Runtime CSS-in-JS 的编译时优化。

什么是 Zero-Runtime CSS-in-JS？

Zero-Runtime CSS-in-JS 是一种将 CSS-in-JS 代码在构建时编译成静态 CSS 文件，而不是在运行时动态生成样式的技术。

为啥要有 Zero-Runtime？

传统的 CSS-in-JS 方案需要在运行时动态生成样式，这会带来以下性能问题：

额外的 JavaScript 执行： 运行时需要执行 JavaScript 代码来生成样式，增加了 CPU 的负担。
样式计算和应用： 浏览器需要重新计算和应用样式，增加了渲染时间。
首次渲染延迟： 在样式生成完成之前，页面可能会出现样式闪烁。

Zero-Runtime CSS-in-JS 通过在构建时将 CSS-in-JS 代码编译成静态 CSS 文件，避免了这些性能问题。

Zero-Runtime 的工作原理

Zero-Runtime CSS-in-JS 的工作原理大致如下：

解析 CSS-in-JS 代码： 在构建过程中，Zero-Runtime CSS-in-JS 工具会解析 CSS-in-JS 代码，提取出样式信息。
生成静态 CSS 文件： 将提取出的样式信息生成静态 CSS 文件。
替换 CSS-in-JS 代码： 将 CSS-in-JS 代码替换成对静态 CSS 文件的引用。

Zero-Runtime 的优势

性能提升： 避免了运行时的 JavaScript 执行和样式计算，提高了页面性能。
更好的 SEO： 静态 CSS 文件更容易被搜索引擎抓取。
更小的 bundle size： 减少了 JavaScript 代码的体积。

Zero-Runtime 的局限性

动态样式支持有限： 无法处理完全动态的样式，例如依赖于用户交互的样式。
构建时间增加： 需要在构建过程中进行额外的编译，增加了构建时间。
调试困难： 难以在运行时调试样式问题。

Zero-Runtime 的代表性库

Linaria: 一个流行的 Zero-Runtime CSS-in-JS 库，它使用 Babel 插件来提取 CSS 代码并生成静态 CSS 文件。
Astroturf: 另一个 Zero-Runtime CSS-in-JS 库，它也使用 Babel 插件来实现编译时优化。
compiled: A library that compiles away CSS-in-JS at build time.

代码示例 (Linaria)

首先，安装 Linaria:

npm install @linaria/core @linaria/react @linaria/babel-preset

然后，配置 Babel:

// babel.config.js
module.exports = {
  presets: ['@babel/preset-react', '@linaria/babel-preset'],
};

接下来，使用 Linaria 编写 CSS-in-JS 代码：

import { styled } from '@linaria/react';

const Button = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: darkblue;
  }
`;

const MyComponent = () => {
  return (
    <Button>Click me</Button>
  );
};

在构建过程中，Linaria 会将这段代码编译成静态 CSS 文件，并将 Button 组件替换成对该 CSS 文件的引用。

Zero-Runtime 的适用场景

Zero-Runtime CSS-in-JS 适用于以下场景：

性能敏感的项目： 可以显著提高页面性能。
静态网站： 可以充分利用静态 CSS 文件的优势。
大部分样式是静态的： 只有少量样式需要在运行时动态生成。

Zero-Runtime 与 Atomic CSS 的结合

Zero-Runtime CSS-in-JS 可以与 Atomic CSS 结合使用，以获得更好的性能和可维护性。例如，可以使用 Tailwind CSS 或 Tachyons 来定义原子类，然后使用 Zero-Runtime CSS-in-JS 来将这些原子类编译成静态 CSS 文件。

表格总结

特性	CSS-in-JS (Runtime)	Atomic CSS	Zero-Runtime CSS-in-JS
运行时开销	高	低	无
动态样式支持	强	有限	有限 (部分支持)
代码复用	中	高	中
可维护性	中	高	中
学习成本	中	中	高
适用场景	动态应用	大型项目	性能敏感，静态为主
代表性库	styled-components, emotion	Tailwind CSS, Tachyons	Linaria, Astroturf
构建时编译	否	否	是
HTML 代码冗余	低	高	低
SEO 友好程度	低	中	高

小结

Zero-Runtime CSS-in-JS 是一种非常有前景的技术，它可以有效地提高页面性能，但也有一些局限性。在选择 Zero-Runtime CSS-in-JS 方案时，需要权衡利弊，选择最适合自己项目的方案。

第四章：选择合适的方案

好了，讲了这么多，相信大家对 JS CSS-in-JS，Atomic CSS，以及 Zero-Runtime CSS-in-JS 都有了一定的了解。那么，在实际项目中，我们该如何选择合适的方案呢？

选择的原则

在选择 CSS 方案时，需要考虑以下几个因素：

项目规模： 大型项目更适合使用 Atomic CSS 或 Zero-Runtime CSS-in-JS。
性能要求： 性能敏感的项目更适合使用 Zero-Runtime CSS-in-JS。
动态性： 需要大量动态样式的项目更适合使用传统的 CSS-in-JS 方案。
团队技能： 需要考虑团队成员对各种 CSS 方案的熟悉程度。
可维护性： 选择易于维护和调试的方案。

一些建议

小型项目： 可以使用简单的 CSS Modules 或内联样式。
中型项目： 可以使用传统的 CSS-in-JS 方案，如 styled-components 或 emotion。
大型项目： 可以考虑使用 Atomic CSS 或 Zero-Runtime CSS-in-JS，或者将它们结合使用。
性能敏感的项目： 优先考虑 Zero-Runtime CSS-in-JS。
需要大量动态样式的项目： 可以使用传统的 CSS-in-JS 方案，并结合使用 memoization 和 shouldComponentUpdate 等技术来优化性能。

最后的话

前端技术日新月异，新的 CSS 方案层出不穷。我们需要不断学习和探索，才能找到最适合自己项目的方案。

今天的讲座就到这里，希望大家有所收获！谢谢大家！

第一章：CSS-in-JS 的前世今生

第二章：Atomic CSS 的思想

第三章：Zero-Runtime CSS-in-JS 的编译时优化

第四章：选择合适的方案

发表回复 取消回复

发表回复取消回复