CSS 预处理器 / 后处理器 / 原子化

CSS 预处理器和后处理器是用于增强 CSS 功能的工具，它们分别在编译时（预处理器）和生成后的 CSS 文件上（后处理器）进行操作。

CSS 预处理器 pre-processor

CSS 预处理器是在编写样式表时使用的语言扩展，它们提供了编程特性如变量、嵌套规则、混合宏（mixins）、函数等，使得编写和维护 CSS 更加容易。预处理器编写的代码需要经过编译步骤才能转换为标准的 CSS 代码。

常见的有：

使用场景和特点

CSS 后处理器是在 CSS 文件已经生成之后对其进行处理的工具。进行添加浏览器前缀、优化代码、检查错误或者根据特定规则修改样式。

常见的有：

CSS 原子化是一种编写、管理 CSS样式的方式，和传统的 CSS 有些不同，它就像是在行级写 style 一样，每一个 class 代表着一个样式或多个紧密相关的样式，它将样式拆分到最小、不可再分 —— 即 原子。

每个原子类只负责一个单一的样式，无需编写传统的具合了多种样式的 CSS 规则。

但是我不是很喜欢这种编写方式，在一些项目中确实可以提高效率，但对我来说在阅读代码时太乱了，很像在行级写 style，在 HTML 中过于臃肿。

而且尽管有好用的预设，但是还是需要一定的学习成本。而脱离写好的预设又需要大量的时间进行预设。

核心理念

单一职责原则：
- 每个 CSS 类进定义一个样式属性或少量紧密相关的属性
- 例如 p-4 只设置 padding: 1rem;，text-center 只设置 text-align: center;
按需使用
- 只有在 HTML 中实际使用的类才会被包含在最终的 CSS 文件中，避免了未使用的样式规则占用空间。
- 这种方式减少了 CSS 文件的大小，提升了页面加载速度。（我没试过测试速度）
快速开发与迭代：
- 开发者可以直接在 HTML 或模板文件中应用现成的原子类，而不需要频繁切换到 CSS 文件进行修改。
- 这样可以加速开发流程，并且使得样式调整更加直观。。。。（还有一些我没体验到的不列举）

在开发文档一类静态网站时确实会快一些，但我想我不会在一般项目中使用这种写法。

常用

两个在官方都没有中文文档，这也是我不常用的原因。