CSS `CSS-in-JS` `Atomic CSS` `Runtime vs Compile-time` `CSS Extraction` 策略

各位观众，晚上好！我是今天的演讲者，很高兴能和大家一起聊聊前端样式处理的那些事儿。今天咱们的主题是关于 CSS-in-JS、Atomic CSS、运行时与编译时策略以及 CSS 提取的那些弯弯绕。希望通过这次分享，能让大家对这些概念有更清晰的认识，并在实际项目中做出更明智的选择。

第一幕：样式江湖，风起云涌

话说前端江湖，样式处理一直是个让人头疼的问题。最初，咱们用的是最传统的 CSS，写在一个个 .css 文件里，用 link 标签引入。这种方式简单直接，但也存在一些问题：

全局命名空间： 类名容易冲突，一不小心就覆盖了别人的样式。为了解决这个问题，出现了 BEM、OOCSS 等命名规范，但依旧避免不了人为的疏忽。
样式复用困难： 一些通用的样式，比如颜色、字体，需要在多个地方重复定义，维护起来很麻烦。
依赖管理： CSS 文件之间的依赖关系不明确，修改一个样式可能会影响到其他页面，难以追踪。

为了解决这些问题，各种各样的 CSS 解决方案应运而生，其中最引人注目的就是 CSS-in-JS 和 Atomic CSS。

第二幕：CSS-in-JS，代码里的时尚秀

CSS-in-JS，顾名思义，就是把 CSS 写在 JavaScript 代码里。这听起来有点疯狂，但却解决了传统 CSS 的很多痛点。

import styled from 'styled-components';

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

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

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

上面的代码使用了 styled-components 库，它允许我们用模板字符串的方式定义 CSS 样式，并将其绑定到一个 React 组件上。

CSS-in-JS 的优点：

局部作用域： 每个组件的样式都是独立的，不会互相影响，告别了类名冲突的烦恼。
动态样式： 可以根据 JavaScript 的变量和函数来动态生成样式，实现更灵活的 UI 效果。
组件化： 将样式和组件紧密结合，提高了代码的可维护性和复用性。
自动 vendor prefixes： 自动添加浏览器前缀，省去了手动维护的麻烦。
更好的代码组织： 将样式和组件放在一起，更容易理解和维护。

CSS-in-JS 的缺点：

运行时开销： 大部分 CSS-in-JS 库都是在运行时生成 CSS，会增加浏览器的负担，影响页面性能。
学习成本： 需要学习新的 API 和语法，增加了开发者的学习成本。
调试困难： 在 JavaScript 代码里调试 CSS 样式，不如在 CSS 文件里方便。
可能会增大 bundle 体积： 一些 CSS-in-JS 库体积较大，可能会增加 bundle 体积。

常见的 CSS-in-JS 库：

库	描述
styled-components	最流行的 CSS-in-JS 库之一，使用模板字符串定义样式，支持动态样式和主题。
emotion	另一个流行的 CSS-in-JS 库，性能优秀，API 简洁易用，支持多种样式写法。
JSS	一个通用的 CSS-in-JS 库，不依赖任何 UI 框架，支持多种样式写法和插件。
Radium	一个用于 React 的 CSS-in-JS 库，支持内联样式和伪类、媒体查询等高级特性。
Aphrodite	一个轻量级的 CSS-in-JS 库，性能优秀，API 简洁易用，适合小型项目。

第三幕：Atomic CSS，原子级别的精细控制

Atomic CSS，又称 Functional CSS，是一种将 CSS 样式拆分成一个个原子级别的 class 的方法。每个 class 只负责一个简单的样式属性，比如颜色、字体、边距等。

<div class="ma2 pa3 bg-blue white f4">Hello, Atomic CSS!</div>

上面的代码使用了 Tailwind CSS 框架，它提供了一套预定义的原子 class。

ma2：表示 margin: 0.5rem;
pa3：表示 padding: 1rem;
bg-blue：表示 background-color: blue;
white：表示 color: white;
f4：表示 font-size: 1.5rem;

Atomic CSS 的优点：

样式复用： 可以通过组合不同的原子 class 来实现各种复杂的样式，避免了重复定义。
一致性： 使用预定义的原子 class，可以保证整个项目的样式风格一致。
性能优化： 原子 class 的体积很小，可以减少 CSS 文件的体积，提高页面加载速度。
易于维护： 修改一个原子 class 会影响到所有使用了该 class 的元素，方便进行全局性的样式调整。

Atomic CSS 的缺点：

可读性差： HTML 代码里会充斥着大量的原子 class，可读性较差。
学习成本： 需要学习原子 class 的命名规则和用法，增加了开发者的学习成本。
灵活性差： 原子 class 只能实现预定义的样式，无法满足一些复杂的定制化需求。
HTML 体积增大： 虽然 CSS 文件体积减小了，但 HTML 文件体积可能会增大。

常见的 Atomic CSS 框架：

框架	描述
Tailwind CSS	最流行的 Atomic CSS 框架之一，提供了一套预定义的原子 class，可以通过配置文件进行定制。
Tachyons	另一个流行的 Atomic CSS 框架，设计理念更加纯粹，只提供最基本的原子 class。
Basscss	一个基于 Flexbox 的 Atomic CSS 框架，适合构建响应式布局。
ACSS (Atomic CSS)	一个较早的 Atomic CSS 框架，提供了丰富的原子 class 和工具函数。

第四幕：运行时 vs 编译时，性能的权衡

CSS-in-JS 和 Atomic CSS 的一个重要区别在于它们的执行时机。CSS-in-JS 大部分是在运行时生成 CSS，而 Atomic CSS 则是在编译时生成 CSS。

运行时策略：

运行时策略指的是在浏览器加载页面时，通过 JavaScript 代码动态生成 CSS 样式。

优点：

灵活性： 可以根据 JavaScript 的变量和函数来动态生成样式，实现更灵活的 UI 效果。
动态主题： 方便实现动态主题切换，根据用户的选择来改变页面的样式。

缺点：

性能开销： 在运行时生成 CSS 会增加浏览器的负担，影响页面性能。
FOUC (Flash of Unstyled Content)： 在 CSS 样式生成之前，页面可能会出现短暂的样式缺失。

编译时策略：

编译时策略指的是在构建项目时，将 CSS-in-JS 或 Atomic CSS 代码转换成静态的 CSS 文件。

优点：

性能优化： 静态 CSS 文件的加载速度更快，可以提高页面性能。
避免 FOUC： 在页面加载之前，CSS 样式已经生成，避免了 FOUC 问题。

缺点：

灵活性降低： 无法在运行时动态生成样式，灵活性有所降低。
配置复杂： 需要配置构建工具，增加了项目的复杂度。

如何选择运行时或编译时策略？

场景	策略	理由
需要动态主题或高度定制化的样式	运行时	运行时策略可以根据用户的选择或 JavaScript 的变量来动态生成样式，满足高度定制化的需求。
对页面性能要求较高，希望避免 FOUC 问题	编译时	编译时策略可以提前生成静态 CSS 文件，提高页面加载速度，避免 FOUC 问题。
项目规模较小，对性能要求不高	运行时	运行时策略的配置比较简单，适合小型项目。
项目规模较大，对性能要求较高	编译时	编译时策略可以更好地优化大型项目的性能，减少浏览器的负担。
使用了不支持编译时提取的 CSS-in-JS 库	运行时	一些 CSS-in-JS 库不支持编译时提取，只能使用运行时策略。
希望减少 JavaScript 的 bundle 体积	编译时	编译时策略可以将 CSS 样式提取到独立的 CSS 文件中，减少 JavaScript 的 bundle 体积。

第五幕：CSS 提取，性能的助推器

CSS 提取是指将 CSS-in-JS 或 Atomic CSS 代码转换成独立的 CSS 文件。这是一种常见的性能优化手段，可以减少 JavaScript 的 bundle 体积，提高页面加载速度。

CSS 提取的原理：

在构建项目时，通过特定的工具（比如 webpack 插件）扫描 JavaScript 代码，找到所有的 CSS-in-JS 或 Atomic CSS 代码，将其转换成静态的 CSS 文件，并生成一个 link 标签，将其引入到 HTML 文件中。

CSS 提取的优势：

性能优化： 静态 CSS 文件的加载速度更快，可以提高页面性能。
减少 bundle 体积： 将 CSS 样式提取到独立的 CSS 文件中，减少 JavaScript 的 bundle 体积。
避免 FOUC： 在页面加载之前，CSS 样式已经生成，避免了 FOUC 问题。
更好的缓存： 独立的 CSS 文件可以被浏览器缓存，提高后续页面的加载速度。

常见的 CSS 提取工具：

mini-css-extract-plugin (webpack)： 一个用于 webpack 的 CSS 提取插件，可以将 CSS-in-JS 或 Atomic CSS 代码提取到独立的 CSS 文件中。
@craco/craco (Create React App)： 一个用于 Create React App 的配置工具，可以方便地配置 CSS 提取。
esbuild： 一个极快的 JavaScript 打包器，也支持 CSS 提取。

CSS 提取的配置示例 (webpack + mini-css-extract-plugin)：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ],
};

上面的代码配置了 webpack，使其能够将 CSS 文件提取到 style.css 文件中。

第六幕：最佳实践，落地生根

说了这么多，最终还是要回到实际项目中。下面是一些关于 CSS-in-JS、Atomic CSS、运行时与编译时策略以及 CSS 提取的最佳实践：

根据项目规模和需求选择合适的方案： 小型项目可以选择 CSS-in-JS 或 Atomic CSS，大型项目建议使用编译时策略和 CSS 提取。
选择合适的 CSS-in-JS 库或 Atomic CSS 框架： 不同的库和框架有不同的特点，需要根据项目的具体情况进行选择。
尽可能使用编译时策略和 CSS 提取： 编译时策略和 CSS 提取可以提高页面性能，减少 bundle 体积。
合理使用 CSS Modules： CSS Modules 可以解决类名冲突的问题，提高代码的可维护性。
注意代码的可读性和可维护性： 无论使用哪种方案，都要注意代码的可读性和可维护性，避免过度设计。
进行性能测试和优化： 在项目上线之前，进行性能测试和优化，确保页面加载速度和用户体验。
保持学习和更新： 前端技术发展迅速，要保持学习和更新，掌握最新的技术和最佳实践。

总结：

CSS-in-JS 和 Atomic CSS 都是解决传统 CSS 问题的有效方案，它们各有优缺点，适用于不同的场景。在选择方案时，需要综合考虑项目的规模、需求、性能等因素。同时，要尽可能使用编译时策略和 CSS 提取，提高页面性能，减少 bundle 体积。

希望今天的分享能对大家有所帮助。谢谢大家！

发表回复 取消回复

发表回复取消回复