pure.css 必须通过 jsdelivr cdn 引入 v3.0.0 版本 pure-min.css，栅格需手动加容器并额外引入 pure-responsive-min.css 才响应式，表单按钮需用专用类名且避免与全局样式冲突。
Pure.css 的 CDN 引入方式和常见加载失败原因
Pure.css 官方不托管 npm 包（@purecss/pure 已废弃），现在只推荐通过 CDN 直接引入，否则容易遇到 404 或样式不生效。最稳的是用官方推荐的 jsDelivr 链接，不是 unpkg，也不是 cdn.jsdelivr.net 的旧路径。
- 正确写法：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css"> - 如果用了
unpkg.com/purecss，可能加载到未构建的源码目录，导致 404；cdn.jsdelivr.net/purecss缺少版本号会 fallback 到错误路径 - 注意：v3.0.0 开始默认只含基础 CSS（
pure-min.css），栅格、表单等模块需单独引入，比如pure-grids-min.css - 本地开发时若用 file:// 协议打开 HTML，部分浏览器会因 CORS 拒绝加载 CDN 资源——必须起一个本地服务（如
python3 -m http.server）
Pure.css 栅格系统为什么“不居中”“不响应”
很多人套了 pure-g 和 pure-u-1-2 却发现布局堆成一列、宽度没变化，根本原因是 Pure.css 的栅格默认不设 max-width、不自动居中，也不开媒体查询断点——它把控制权完全交给你。
- 必须手动加容器：
<div class="pure-g"><div class="pure-u-1-2">...</div></div>，且父容器不能是width: 100%的块级元素（比如直接子元素），否则pure-u-*计算会失准 - 响应式要显式启用：Pure.css v3 默认关闭所有断点，得额外引入
pure-responsive-min.css，且该文件必须在pure-min.css之后加载 -
pure-u-1-2是基于 flex 的百分比宽度，不是 float 布局，所以不需要clear，但也不能和float混用，否则 flex 容器会失效
按钮、表单控件样式被覆盖或显示异常
Pure.css 的 pure-button 和 pure-form 类名极简，几乎不带重置逻辑，一旦页面已有全局 button { padding: 0 } 或 * { box-sizing: border-box } 类规则，就容易错位或尺寸崩坏。
闪灵CMS企业建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用PHP+MYSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建站方案。
- 务必检查是否漏了
pure-form-aligned或pure-form-stacked—— Pure.css 不给表单默认垂直/水平排列，pure-form只做基础重置 - 按钮禁用状态要用
pure-button-disabled，而不是原生disabled属性，后者不会触发 Pure.css 的灰阶样式（v3 中[disabled]选择器未被定义） - 自定义字体大小后，
pure-button的行高可能错乱，建议用font-size: inherit保持继承，而非硬写14px - IE11 下
pure-u-1-3在 flex 容器中可能换行，需加flex-shrink: 0（Pure.css 本身没设）
和现代框架（React/Vue）一起用的 DOM 干扰问题
Pure.css 是纯 CSS 库，不操作 DOM，但它的类名太短（如 pure-g、pure-u-1-2），容易和组件库或 BEM 命名冲突，尤其在 SSR 或服务端渲染场景下，class 名重复会导致样式覆盖或丢失。
立即学习“前端免费学习笔记（深入）”；
- 避免直接在 JSX 中写
className="pure-g"，改用模板字符串拼接或工具函数封装，比如clsx('pure-g', props.className) - Vite / Webpack 构建时若启用了 CSS Scope（如 Vue SFC 的
scoped），Pure.css 的全局样式会被隔离——必须把 Pure.css 放进index.html的，别 import 到组件里 - 使用 Tailwind 后再加 Pure.css，大概率出现按钮圆角、间距、字体权重打架，因为两者都重置了
button、input等元素，默认优先级相近
Pure.css 的“极简”是双刃剑：它不帮你做决定，也就意味着每个布局、每个断点、每个状态都要你亲手确认是否生效——最容易忽略的是那个 pure-responsive-min.css 文件，没它，栅格就是静态的。
