Pure

一、网站概况

Pure 是一款由美国雅虎公司（Yahoo）出品的轻量级、响应式纯 CSS 模块框架，适用于任何 Web 项目。其官方网站 Purecss.cn 是 Pure 框架的中文资源站点，提供框架文档、使用教程、模板示例及扩展资源，帮助中文开发者快速上手这一极简 CSS 工具。

Pure 的核心理念是“小到极致”——整个框架压缩为 gzip 后仅约 3.7KB，单个功能模块（如栅格、按钮、表单）的独立体积均不足 1.5KB。该框架基于 Normalize.css 构建，原生支持响应式布局，不依赖任何 JavaScript，专注于提供最基础的 HTML 元素样式与常用 UI 组件。

截至当前，Pure 的最新稳定版本为 2.0.3，网站本身由 Pure v1.0.0 构建，所有代码遵循 Yahoo BSD License 开源协议。凭借极轻的体积和高度可定制性，Pure 在全球范围内拥有稳定的开发者用户群体，尤其受到追求性能的移动端 Web 项目青睐。

二、核心功能详解

1. 栅格系统（Grids）

Pure 的栅格系统基于 flexbox 实现，提供了一套极简的响应式布局方案。开发者只需使用 pure-g 容器类配合 pure-u-1-3、pure-u-1-2 等宽度类，即可快速划分页面布局。栅格模块压缩后仅 0.8KB，支持任意屏幕尺寸下的自动换行与等宽分布，配合 pure-u-sm-*、pure-u-md-* 等响应式前缀，可以针对不同断点调整列宽。实际使用中，两行代码即可完成一个三栏自适应布局。

2. 表单（Forms）

Pure 的表单模块（1.4KB）提供了一系列预定义的表单控件样式，包括输入框、文本域、复选框、单选按钮和下拉菜单。所有表单元素采用统一的对齐与间距规范，支持堆叠式（默认）与水平对齐式两种布局。通过添加 pure-form-stacked 或 pure-form-aligned 类即可切换风格，无需手动编写对齐样式，显著提升表单开发效率。

3. 按钮（Buttons）

按钮模块虽然仅有 0.6KB，但提供了完整的按钮样式体系。基础类 pure-button 定义一个简洁的扁平按钮，配合 pure-button-primary 可生成高亮主按钮，pure-button-disabled 实现禁用状态。按钮样式自动继承字体与边框属性，可轻松与其他模块组合使用。

4. 菜单（Menus）

Pure 的菜单模块（0.7KB）支持水平导航栏、垂直侧边栏及下拉菜单。通过 pure-menu-horizontal 或 pure-menu-vertical 切换方向，嵌套列表结构即可构建多级菜单。菜单项自动处理 hover 高亮、当前项标识与分隔线，适合快速搭建站内导航。

三、使用教程/操作指南

第一步：引入框架文件

在 HTML 的 <head> 中通过 CDN 引入 Pure 的压缩版样式表即可开始使用，无需下载或构建工具。推荐使用 unpkg 的 CDN 链接（见首页提供），也可以下载源文件到本地项目。

第二步：选择合适的模块

Pure 采用模块化设计，如果你只需要按钮样式，可单独引入 buttons-min.css；如果需要完整功能，直接引入 pure-min.css 合计文件即可。按需加载可进一步压缩页面体积。

第三步：编写布局结构

以栅格布局为例：在容器元素上添加 pure-g 类，在子元素上添加 pure-u-1-3 类即表示占三分之一宽度。Pure 的类名非常直观，分数分母表示总列数，分子表示占用列数。

第四步：定制主题样式

Pure 的扩展页面提供了 Default、Blue、Yellow、Black、Green、Red 等 9 种配色皮肤。只需在基础样式之后再引入对应主题 CSS 文件，或者手动覆盖 Pure 的 CSS 变量即可全局换肤。

小技巧：Pure 极度开放，官方鼓励“编写新规则而非覆盖旧规则”。为特定组件添加自定义类名并结合少量 CSS，即可打造独一无二的 UI 风格，无需费尽心思去“对抗”框架默认样式。

注意事项：Pure 不包含任何 JavaScript 功能，下拉菜单的展开收起、移动端导航折叠等交互需要自行编写少量 JS 或结合其他轻量脚本实现。

四、内容与资源质量

Pure 框架的代码质量在开源社区享有很高声誉。其 CSS 规则经过精心裁剪，几乎不存在冗余声明，每个选择器都有明确用途。框架基于 Normalize.css 进行跨浏览器一致性处理，确保在不同浏览器下的表现统一。

资源量方面，Pure 提供 6 个核心模块（基础、栅格、表单、按钮、表格、菜单）以及扩展主题和社区模板。文档站点提供了完整的 API 说明与示例代码，另有多个可直接套用的响应式布局模板（如博客布局、邮件客户端界面、登录页等），降低了新手入门门槛。

更新频率上，Pure 自 2014 年发布 1.0 版本后保持稳定迭代，2.0 版本对 flexbox 栅格进行了全面升级。由于框架定位“小而稳定”，更新并不频繁，但不影响其作为基础样式层的可靠性。代码完全开源，遵循宽松的 BSD 协议，允许自由使用、修改和商业应用，无需担心版权风险。

五、适用人群与场景

适合人群：

• 追求极致页面加载速度的前端开发者，尤其是移动端 H5 页面开发者
• 需要快速搭建原型或内部管理后台的工程师
• 希望完全掌控 CSS 结构、不想被重型框架“绑架”的自由开发者

不适合人群：

• 需要丰富现成组件（如模态框、轮播图、日期选择器）的开发者，Pure 不提供 JavaScript 交互组件
• 团队协作中依赖统一 UI 规范的大型项目，Pure 缺少完整的组件库和设计令牌体系

使用场景举例：

1. 移动端营销页面：借助 Pure 的 3.7KB 体积和响应式栅格，可在弱网环境下快速呈现页面
2. 个人博客/作品集：使用 Pure 的菜单和栅格模块即可搭建干净清爽的内容站点
3. 管理后台原型：表单和表格模块提供了足够的样式基础，配合少量自定义 CSS 快速产出可用的后台界面

六、优缺点分析

优点：

1. 体积极轻：gzip 后仅 3.7KB，对页面性能影响几乎可以忽略
2. 开放性强：不强制任何设计风格，代码简单透明，定制成本极低
3. 专注 CSS：清晰划分边界，不与 JavaScript 逻辑耦合，适合与其他框架或原生 JS 搭配
4. 文档友好：中文站点提供了完整的示例和模板，学习曲线平缓

不足：

1. 组件匮乏：没有模态框、提示框、导航折叠等常见 UI 组件，需要自行开发或借助第三方库
2. 无 JavaScript 支持：所有交互行为需手动实现，对新手不够友好
3. 社区活跃度有限：相比 Bootstrap 和 Tailwind CSS，Pure 的使用者较少，遇到问题可参考的第三方教程和插件不多