选 bootstrap 还是 pure css 取决于需求：需开箱即用组件选 bootstrap，要轻量无 js 干扰则 pure 更合适；pure gzip 后仅 3.7kb，bootstrap 超 150kb；pure 模块化按需引入，bootstrap 默认全量加载；pure 无 js，交互需自实现，bootstrap 依赖其 js 运行时。
选 Bootstrap 还是 Pure CSS，取决于你到底要什么：需要开箱即用的交互组件、表单验证、模态框、轮播图？选 Bootstrap；只想要轻量、干净、无 JS 干扰的布局和基础样式，且愿意自己补交互逻辑？Pure 更合适。
文件体积和加载性能差异明显
Pure 的核心 CSS（含网格、表单、按钮等）gzip 后仅 3.7KB，而 Bootstrap 5 的完整 CSS + JS（不含图标）压缩后通常超 150KB。这意味着：
- 纯静态页面或内容型站点（如文档页、博客首页），
Pure能显著减少首屏阻塞时间 -
Bootstrap的体积主要来自组件样式 + 内置 JS 行为（如collapse、dropdown），如果你只用其中 20% 的功能，却加载全部代码，就是隐性浪费 - CDN 加载时，
Pure通常在 1–2 个 RTT 内完成，Bootstrap可能触发多次请求（CSS + JS + 可选图标字体）
模块化 vs 全包式：怎么引入、怎么维护
Pure 是真模块化——你只引入需要的文件：
-
pure-min.css：基础重置 + 工具类 -
grids-min.css：仅网格系统（支持.pure-u-1-2这类语义类名） -
forms-min.css、buttons-min.css：按需加载，不污染全局
而 Bootstrap 默认提供单体 CSS 文件（bootstrap.min.css），虽支持 Sass 拆分，但实际项目中多数人直接引入全量包。Sass 变量定制虽灵活，但一旦改了 $enable-rounded 或 $grid-breakpoints，就得重新编译，对简单项目反而增加门槛。
交互能力不是“有无”，而是“谁来负责”
Pure 明确不包含任何 JavaScript——pure.css 就是纯 CSS。这意味着：
- 下拉菜单、折叠面板、提示框（tooltip）、模态框（modal）等必须自己用原生 JS 或第三方库（如
Alpine.js）实现 - 表单校验、日期选择器、富文本编辑器等完全不在框架范围内，得额外集成
-
Bootstrap的data-bs-toggle="modal"看似方便，但依赖其 JS bundle；若你禁用 JS 或使用现代打包器（Vite + ES modules），反而要手动 import 对应模块，否则Modal类无法工作
换句话说：Pure 把控制权交还给你；Bootstrap 提供默认行为，但也绑定了它的运行时契约。
浏览器兼容性和定制自由度的实际落差
Pure 基于 Normalize.css，支持 IE9+ 和所有现代浏览器，但不处理 IE8 兼容（Yahoo 早已放弃）。Bootstrap 5 则彻底移除 IE 支持，专注现代标准——这点上两者立场一致。
但定制方面差异更大：
-
Pure的类名极简（.pure-button、.pure-table），几乎没有嵌套规则，覆盖样式几乎无副作用 -
Bootstrap大量使用 BEM 风格（.btn.btn-primary.btn-lg）和深层嵌套（如.dropdown-menu .dropdown-item:focus），想局部覆盖常得提高 CSS 优先级或加!important - 如果你用 Tailwind 或 UnoCSS 做原子化开发，
Pure的存在感更低、更易共存；而Bootstrap的工具类（如mb-3）可能与你自己的命名空间冲突
真正容易被忽略的是：很多团队选 Bootstrap 并非因为技术优势，而是因为「同事都熟」「招聘容易」「出问题搜得到答案」——这种隐性成本，Pure 不提供，也从不承诺解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
