PostCSS #

什么是 PostCSS？ #

PostCSS 是一个用 JavaScript 转换 CSS 的工具，它通过插件系统实现各种 CSS 转换功能。与 Less、Sass 等预处理器不同，PostCSS 更像是一个 CSS 处理平台，你可以根据需要选择和组合各种插件。

text

┌─────────────────┐
│   源 CSS 文件    │
│   (.css)        │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│    PostCSS      │
│   + 插件系统     │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   转换后 CSS     │
│   (.css)        │
└─────────────────┘

文档结构 #

本指南按以下结构组织，循序渐进地帮助你掌握 PostCSS：

1. 入门基础 #

主题	描述	文档链接
PostCSS 简介	PostCSS 的定义、特点、历史与核心概念	intro.md
安装与配置	安装方式、配置文件、基本设置	installation.md
基本使用	CLI 使用、API 调用、第一个转换	basic-usage.md

2. 核心特性 #

主题	描述	文档链接
插件系统	插件原理、加载顺序、配置方式	plugins.md
常用插件	最流行的 PostCSS 插件介绍	popular-plugins.md

3. 进阶功能 #

主题	描述	文档链接
Autoprefixer 详解	自动添加浏览器前缀的完整指南	autoprefixer.md

4. 高级特性 #

主题	描述	文档链接
自定义插件开发	开发自己的 PostCSS 插件	custom-plugins.md

5. 最佳实践 #

主题	描述	文档链接
最佳实践	项目配置、性能优化、常见问题	best-practices.md

学习路径 #

入门阶段（PostCSS 新手） #

了解 PostCSS 的基本概念和优势
安装 PostCSS 和基本插件
学会使用 CLI 和 API
配置第一个 PostCSS 项目
理解插件的工作原理

进阶阶段（PostCSS 熟练） #

掌握常用插件的配置和使用
理解 Autoprefixer 的工作机制
学会组合多个插件
与构建工具（Webpack、Vite）集成
处理复杂的 CSS 转换需求

高级阶段（PostCSS 专家） #

深入理解 PostCSS AST 结构
开发自定义 PostCSS 插件
优化插件执行性能
设计大型项目的 CSS 处理流程
解决复杂的兼容性问题

大师阶段（PostCSS 大师） #

贡献 PostCSS 核心代码
开发并维护开源插件
设计创新的 CSS 处理方案
参与社区讨论和标准制定
分享经验和最佳实践

PostCSS vs CSS 预处理器 #

特性	PostCSS	Less	Sass
类型	后处理器/转换器	预处理器	预处理器
语法	标准 CSS	自定义语法	SCSS/Sass
插件	丰富生态	有限	有限
可扩展性	极高	中等	中等
学习曲线	低	低	中
灵活性	最高	中等	中等
社区活跃度	非常高	高	非常高

快速开始 #

css

/* 输入 CSS */
:root {
  --primary-color: #007bff;
}

.button {
  background: var(--primary-color);
  border-radius: 4px;
  display: flex;
  user-select: none;
}

经过 PostCSS 处理后（使用 Autoprefixer 和 cssnano）：

css

/* 输出 CSS */
:root {
  --primary-color: #007bff;
}

.button {
  background: var(--primary-color);
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

为什么选择 PostCSS？ #

1. 模块化设计 #

PostCSS 采用插件架构，你可以按需选择功能：

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' })
  ]
}

2. 使用标准 CSS #

PostCSS 处理的是标准 CSS，不需要学习新语法：

css

/* 标准 CSS，PostCSS 可以直接处理 */
.container {
  display: grid;
  gap: 20px;
}

3. 丰富的插件生态 #

Autoprefixer：自动添加浏览器前缀
cssnano：CSS 压缩优化
PostCSS Preset Env：使用未来的 CSS 特性
stylelint：CSS 代码检查
PostCSS Nested：嵌套语法支持

4. 与工具无缝集成 #

javascript

// Webpack
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
}

核心优势 #

灵活性 #

PostCSS 可以做任何 CSS 转换：

text

CSS 预处理功能：
├── 变量支持
├── 嵌套语法
├── Mixin 支持
└── 函数计算

CSS 后处理功能：
├── 自动前缀
├── CSS 压缩
├── 语法检查
└── 兼容性处理

性能 #

PostCSS 使用高效的 AST 解析：

javascript

// PostCSS 处理流程
const result = await postcss([plugin1, plugin2])
  .process(css, { from: 'source.css', to: 'output.css' })

可扩展 #

开发自定义插件非常简单：

javascript

const plugin = () => {
  return {
    postcssPlugin: 'my-plugin',
    Declaration(decl) {
      // 处理 CSS 声明
    }
  }
}
plugin.postcss = true

资源推荐 #

PostCSS 官方文档：最权威的 PostCSS 文档
PostCSS GitHub：PostCSS 源码和问题反馈
Awesome PostCSS：PostCSS 插件合集
PostCSS Preset Env：CSS 特性支持查询

贡献指南 #

欢迎对本指南进行贡献！如果你发现错误或有改进建议，请联系我们。

更新日志 #

2026-03-28：创建初始版本，包含完整的 PostCSS 学习大纲

继续探索本指南，逐步掌握 PostCSS 技术，从新手成长为 PostCSS 专家！