pure.css 在体积、模块化和运行时开销上显著优于 bootstrap：gzip 后仅 3.7kb（bootstrap 为 25kb），支持按需加载独立模块，无 js 依赖且命名空间隔离，但功能覆盖较窄。
如果您在选型前端 CSS 框架时关注体积与加载效率，需明确区分框架的原始体积、实际传输大小及可裁剪性，则必须对比其压缩后尺寸、模块化程度与运行时开销。以下是针对 Bootstrap 与 Pure.css 轻量化特性的具体分析步骤：
一、纯体积对比：Gzip 压缩后基准数据
Pure.css 的完整版（含 Grid、Forms、Buttons、Tables、Menus）Gzip 压缩后仅约 3.7KB；而 Bootstrap 5.3 完整 CSS（bootstrap.min.css）Gzip 后约为 25KB，是 Pure.css 的近 7 倍。该差距源于 Pure.css 采用极简主义设计哲学，不包含 JavaScript 组件、动画类、深嵌套工具类或冗余浏览器补丁。
1、Pure.css 的 3.7KB 是指所有官方模块合并后经 gzip 压缩的实际网络传输体积；
2、Bootstrap 的 25KB 数据来自其官方 CDN 发布的 bootstrap.min.css（v5.3.3），不含 JS 文件，仅 CSS；
3、若仅启用 Pure.css 的 Grid + Buttons 子模块，可进一步降至 约 1.8KB（按 2026 年 3 月实测 CDN 资源）。
二、按需加载能力：模块化结构差异
Pure.css 本质是一组独立 CSS 模块（grids.css、buttons.css、forms.css 等），允许开发者仅引入所需部分，且模块间无强依赖；Bootstrap 则以单体 CSS 文件交付，虽支持 Sass 源码定制，但默认构建产物为全量样式表，即使仅使用栅格系统，也需加载全部工具类与组件重置规则。
1、Pure.css 可通过 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-min.css"> 单独加载网格；
2、Bootstrap 若想裁剪，必须使用 npm + Sass + 自定义 _variables.scss + bootstrap/scss/bootstrap.scss 重新编译，流程复杂；
3、未经过构建流程的 Bootstrap 直接引用 CDN 全量文件时，无法规避 navbar、carousel、tooltip 等未使用组件的 CSS 规则。
三、运行时影响：无 JS 依赖与样式污染控制
Pure.css 是纯 CSS 框架，不捆绑任何 JavaScript，也不注入全局行为逻辑；Bootstrap 5.x 虽移除了 jQuery 依赖，但其 CSS 中仍包含大量 :focus-visible、[data-bs-toggle] 等伪类与属性选择器，这些规则在无对应 JS 初始化时可能造成意外样式触发或性能微损耗。
1、Pure.css 所有类名均以 pure- 开头，命名空间隔离彻底，几乎不与项目自有样式冲突；
2、Bootstrap 使用 .btn、.container 等通用类名，在已有基础样式库的项目中易引发覆盖或优先级竞争；
3、Pure.css 基于 Normalize.css 实现跨浏览器一致性，不额外添加重置规则以外的强制样式。
四、轻量化代价：功能覆盖边界
Pure.css 主动放弃复杂交互组件（如折叠面板、下拉菜单、模态框）、状态反馈类（.is-invalid、.bg-success）、响应式工具类（.d-none、.text-center）及深色模式支持；Bootstrap 则内置完整语义化工具集，但带来体积膨胀与学习成本上升。
1、Pure.css 不提供表单验证视觉反馈，需自行编写 .pure-form .error 类；
2、Bootstrap 默认包含 .visually-hidden、.stretched-link、.ratio 等 30+ 工具类，增加 CSS 文件体积约 4.2KB（gzip 后）；
3、当项目仅需响应式栅格与按钮样式时，Pure.css 可实现零冗余交付，而 Bootstrap 至少携带 18KB 未使用规则。
五、构建后体积实测：真实工程场景数据
在基于 Vite 构建的静态站点中，分别引入 Pure.css Grid+Buttons 模块与 Bootstrap 5.3 栅格子集（通过 Sass @use 导入 bootstrap/scss/functions 和 bootstrap/scss/grid），最终打包产物 CSS 体积（gzip 后）显示显著差异。
1、Pure.css 方案输出 CSS 体积为 2.1KB（含自定义 reset 补充）；
2、Bootstrap 按需 Sass 引入方案输出 CSS 体积为 9.6KB（含函数、变量、栅格容器/行/列全部规则）；
3、两者均未启用 CSS Scope 或 Shadow DOM，测试环境为 Chrome 124，无 Polyfill 注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
