Pinterest使用什么技术实现CSS？自动生成复用类名相关疑问

你看到的这种短哈希类名、单规则全局复用的CSS实现，是**原子化CSS（Atomic CSS）**的工程化方案，不是特定的开源CSS框架，也不是原生CSS手动编写的，是Pinterest内部自研的工具链生成的，核心逻辑和现在流行的Tailwind CSS一致。

• 你给出的示例里，.Jea对应display: flex; flex-direction: row、.gjz对应align-items: center，每个类只对应1~2条极细粒度的CSS规则，就是原子化CSS的典型特征：每个类只负责单一的样式功能，需要组合多个类来实现完整的组件样式。
• 这种类的生成和复用完全由构建工具自动完成：
  1. 构建阶段工具会扫描全项目所有文件中的样式声明，对所有出现过的样式规则进行去重，每一种唯一的样式规则都会被分配一个全站唯一的短哈希类名
  2. 工具会自动把开发时写的组件样式，替换为对应的原子类名组合，最后把所有原子类的CSS规则打包成单个全局CSS文件
• 和你现在使用的styled-components的核心差异是：styled-components是为每个组件生成独立的类名，类名包含该组件的所有样式规则，几乎不会跨组件复用，项目体积越大CSS冗余越多；而原子化CSS的类全局复用，整个站点的CSS体积不会随着业务迭代出现大幅度增长，非常适合Pinterest这种超大规模的内容站点。

如果你想在自己的Pinterest克隆项目里实现类似效果，可以直接使用Tailwind CSS这类开源原子化CSS框架，也可以通过PostCSS插件配合自定义规则实现相近的构建效果。

内容的提问来源于stack exchange，提问作者Gabriel Ribeiro