分两部分:已定决策(用户在 2026-10-27 给出的口径,以及本轮据此落地的实际做法)与仍待定项(尚未拍板,逐条列出候选项与影响)。
影响大小的口径:影响大=牵动几乎所有后续文件的写法,改起来成本高;影响中=影响一批文件但不改变整体架构;影响小=局部可调整。
plui- 开头:plui-<版本号>.css / plui-<版本号>.min.css;另有别名 plui.css / plui.min.css 供示例页引用。参考 Bootstrap 的定位思路:以通用工具与栅格为基础,同时提供成套组件。既不做纯 utility-first 的原子化框架,也不只做组件库。
影响:组件层与工具层都保留;文档按「栅格 / 工具类 / 组件」三段组织;示例页覆盖两类。
组件层按 Bootstrap 的划分方式组织(容器、栅格、按钮、表单、导航、标签页、折叠、提示框、卡片、面包屑、分页、表格、徽标、下拉、模态),类名与栅格思路直接对标 Bootstrap,便于用户迁移认知。
影响:src/css/components/ 下 13 个组件文件;src/css/layout/ 负责容器与栅格;工具类提供零散微调。
plui- 前缀(2026-10-27)所有类名一律加 plui- 前缀:.plui-grid、.plui-btn、.plui-col-md-6、.plui-mt-3。
影响:与第三方样式几乎不会撞名,可与其他框架、遗留样式共存;类名变长,HTML 略胖。同时解决了与 common.js 自动逻辑的冲突——sx 函数库会自动接管 .tab、.menu a、.back、.sidebar 等类名,plui 用前缀天然避开。
is- / has- 放行,js- 类放行(2026-10-27)组件内部元素用「块__元素」写法,修饰用 -- 后缀;工具类用单用途短名。状态类允许 is- / has- 前缀,js- 类也允许,用于挂 JS 行为钩子。
实际落地:本版以 Bootstrap 的连字符风格为主(如 .plui-card-title、.plui-nav-tabs-link),is- / has- / js- 前缀在规范里放行但目前没有实际使用。
| 档位 | 媒体查询 | 说明 |
|---|---|---|
| xs | < 576px | 基线,只写基础样式,不带前缀 |
| sm | ≥ 576px | 第一档 |
| md | ≥ 768px | 第二档 |
| lg | ≥ 992px | 第三档 |
| xl | ≥ 1200px | 第四档 |
| xxl | ≥ 1400px | 第五档 |
「五档」指 sm/md/lg/xl/xxl 五个媒体查询断点,xs 是不带前缀的基线。
移动优先:基础样式面向 xs 写,断点变体用 @media (min-width: ...) 往上覆盖。只用媒体查询,不引入容器查询。断点取值同时写在 base/tokens.css 的 --plui-breakpoint-*(仅作记录)与 responsive/ 各文件媒体查询上方的注释里——CSS 自定义属性不能用于媒体查询条件。
影响:src/css/responsive/ 五份文件(display / flex / grid / spacing / text),全部是断点变体;基线版本留在 utilities/ 与 layout/。
.plui-{断点}:{属性}-{取值},断点段前置(2026-10-27)工具类全面参考 Tailwind。断点段放在最前面而不是中缀,原因是 Tailwind 的取值里本来就有 sm / md / lg / xl(字号 sm、圆角 md、阴影 lg),中缀写法会产生「圆角 md」与「md 断点起圆角」同名的二义类名。栅格与组件层保留 Bootstrap 的中缀写法(.plui-col-md-6),两层约定各自封闭、不交叉。
工具类不再手写:build/generators/ 存放刻度表与分类生成器,build/gen-utilities.mjs 产出 src/css/utilities/ 与 src/css/responsive/ 的普通 CSS 源码,源码直接进版本库,构建期只负责拼接与压缩。理由是手写几千条原子类无法保证一致性(同一档位在不同文件里出现两种写法),而生成器可以先做类名重复自检再落盘。生成器纯 Node、零 npm 依赖。
在 D5 的单层令牌上扩成四层,深色模式本版依旧不做,但把主题层的覆盖点预留好:将来只要追加一段 [data-plui-theme="dark"] 覆盖语义层,组件与工具类不需要改动。
base/tokens.css 一层全局自定义属性,分原始值(--plui-color-gray-600)与语义值(--plui-color-text-muted)两组命名,语义值引用原始值。不做多主题与 prefers-color-scheme 深色模式。
影响:所有组件只引用语义令牌,换主题时只改 tokens.css;深色模式以后加是新增一层映射,不动组件。
间距档位 0 / 0.25rem / 0.5rem / 1rem / 1.5rem / 3rem,即 0 / 4 / 8 / 16 / 24 / 48px。字号用 rem。边框用 px(1px 不随字号缩放更符合极简风格)。未使用 clamp() 流式排版。
行 .plui-row 用 Flex + flex-wrap,列用 flex: 0 0 auto; width: n%。间距用 CSS 自定义属性 --plui-gutter-x / --plui-gutter-y,行用负边距、列用内边距抵消,与 Bootstrap 5 的做法一致。
选 Flex 而不是 CSS Grid 的理由:本框架的栅格只需要「一行若干列 + 换行 + 偏移 + 间距」这几件事,Flex 天然处理换行与不等分列,且列的 width: n% 与 offset 的百分比计算在 Flex 下更直观;Grid 的二维优势在只有单行场景下用不上,反而要处理 grid-template-columns 与 span 的对应关系。
已实现:容器与栅格、排版、间距工具类、边框与背景工具类、按钮、表单控件、导航栏与标签页、折叠面板、提示框、卡片、面包屑、分页、表格、徽标、下拉菜单、模态框。
需要 JS 的只有标签页、折叠面板、下拉菜单、模态框、可关闭提示框、导航栏折叠六项。
build/build.mjs(纯 ESM,零 npm 依赖)负责拼接与压缩;build/gen-utilities.mjs 负责生成重复度极高的工具类源码。压缩器是自己写的简易实现,去注释、去多余空白,按约定保留每块最后一条声明的分号。
不做预处理器,不联网装包。产物不做 source map。
用到了 CSS 自定义属性、calc()、clamp() 之外的现代选择器(:focus-visible)、accent-color、inset 简写。未做 IE 兼容,未做旧浏览器降级。 具体最低版本矩阵尚未逐项测定,属于待补项。
dist/css/ 下同时提供 plui-0.1.0.css、plui-0.1.0.min.css 与别名 plui.css、plui.min.css。不分模块产物,不提供 CDN 链接,不发布 source map。版本号规则沿用语义化版本。
站点上的 cPanel/LiteSpeed 会拦截 .md 直接访问,返回 403(这是服务器行为,不是文件问题)。因此每篇文档都同时提供一份同名 .html(由 build/build-docs.mjs 从 Markdown 生成),浏览器里直接看 HTML,Markdown 作为可编辑源文件保留。
生成器只覆盖常用 Markdown 子集(标题、段落、列表、表格、代码块、行内代码、粗体、链接、引用、分隔线),不是完整实现。
src/common.js(sx 函数库),不引入 jQuery(2026-10-27)用户上传的 src/common.js 是 sx 函数库(xueluo.cn),全局名 window.sx / window.SX,不是 jQuery。框架的交互层基于它的真实 API 编写。
src/plui.js,挂在 window.pluicommon.js 只读取引用,不修改其内容common.js 缺少的能力(off()、closest()、单类判断、可靠的键盘事件)在 plui.js 里用原生 JS 补齐详见 COMMONJS.md。
#000,背景 #fff,正文 #000#000 / #333 / #666 / #9991px 纯黑实线0.plui-{断点}:{属性}-{取值}(2026-10-27)v0.1.0 试过把断点写在中缀位置(.plui-mt-md-3、.plui-text-lg-start)。改用 Tailwind 式的取值表后这套写法会撞名:Tailwind 的取值里本来就有 sm md lg xl(字号、圆角、阴影档位),断点写在中缀位置时,.plui-rounded-md 会同时表示「圆角档位 md」和「md 断点起圆角」。
所以断点段提到最前面:.plui-md:mt-3、.plui-lg:text-left、.plui-xl:grid-cols-6。CSS 里写作 .plui-md\:mt-3(冒号需转义),HTML 的 class 属性里直接写 class="plui-md:mt-3"。
代价:类名里带冒号,用 querySelector('.plui-md\:mt-3') 选择时要转义,属性选择器 [class~="plui-md:mt-3"] 更稳。栅格与组件继续沿用 Bootstrap 的中缀写法,两套命名各管一层、不混用。
工具类共 8038 个类名,手写不现实,也不利于审查。做法是:build/generators/scales.js 存刻度表(间距、颜色、字号、圆角、阴影、层级、过渡),build/generators/<分类>.js 存属性定义,build/gen-utilities.mjs 生成 src/css/utilities/ 与 src/css/responsive/ 的源码。
生成结果直接进版本库(不跑构建也能读源码),生成器每次运行先做类名重复自检,重复即中止。改刻度只改 scales.js,不动生成后的文件。
v0.1.0 是单层令牌。v0.2.0 拆成四层:原始层写具体值,语义层给别名,组件层放组件参数,主题层预留覆盖。组件不写死色值,改主题时组件不用动。
语义色(红/黄/绿/蓝等)在极简风格里只出现在 1px 边框与文字上,不铺大面积色块;深色模式本版不做,但主题层的接法已在 docs/THEMING.md 写好。
工具类命名与档位都变了,属于破坏性变更,直接发 0.2.0,不做兼容别名。旧类名不做过渡保留,迁移对照表见 docs/README.md。
当前用语义化版本 0.1.0,但什么算 breaking change、是否跟随站点更新打 tag、是否发布到 npm 或 CDN,都没有定。
D5 定了「本版不做」,但以后做不做、以什么方式做(prefers-color-scheme 自动切换 / data-theme 手动切换 / 双套令牌文件)还没定。这条牵动 tokens.css 的分层方式,越晚定改动越小。
D11 只说了「按现代浏览器实现」,具体支持到哪一版(Chrome / Safari / Firefox / Edge 各多少)没有逐项测定。影响以后要不要引入构建期降级。
下一批做哪些组件还没定。候选:骨架屏、Toast(可复用 common.js 的 sx.pop)、抽屉、工具栏、头像、进度条、列表组、树形菜单、日期选择器、代码高亮。
本版只做了基本处理(:focus-visible 描边、标签页 / 折叠面板 / 模态框的 ARIA 属性由 plui.js 自动补齐)。是否要按 WCAG 2.2 AA 做完整过检、要不要引入无障碍测试清单,还没定。
现在组件清单写在 docs/COMPONENTS.md 里,与源码是两份。是否要让文档从源码元数据自动生成,还没定。
是否提供 npm 包、zip 下载、或者只留在站点上,还没定。
影响面最大的几条已经在 2026-10-27 全部定下,第一版已经按这些口径实现并上线。后续推进主要看这几条:
tokens.css 以后要不要改成两层四层令牌的主题层不再只是预留。新增 src/css/base/dark.css,覆盖语义层令牌即可让组件与工具类整体转深色。两种入口:data-plui-theme="dark" 手动指定,或不写属性跟随 prefers-color-scheme。原始色阶(bg-gray-100 这类)不跟随主题,深色适配要用语义类(bg-soft、text-muted、text-faint)。暗色下语义色自动提亮一档,保证边框与文字对比度。
src/plui.js 重写为组件式结构:每个组件是构造函数(new plui.Modal(el)),统一 show / hide / toggle / dispose 方法与静态 getInstance / getOrCreateInstance,事件统一 show.bs.plui / shown / hide / hidden(冒泡、show 与 hide 可取消),另外补发 show.bs.plui.<组件名> 供精确监听。data 属性统一 data-plui-*,不提供 data-bs-* 别名。旧版的 plui.toast.notify 等便捷入口保留。
本轮补齐:离屏面板、滚动监听、占位块、按钮组(含勾选式)、输入组、浮动标签、选择框与范围尺寸、导航下划线与填充变体、图文元素(figure / blockquote / code / kbd / mark / abbr / initialism)、辅助类(比例盒 / 粘性 / 固定 / 清浮动 / 可见性)、暗色主题、打印样式、减少动效偏好、高对比度适配。
明确不做(并说明原因):脚手架与构建体系(框架只提供样式与交互层,不做打包器)、jQuery 插件形式(约束是不引 jQuery)、Popper 级别的浮层定位(自研定位引擎只做四向翻转,不做虚拟元素与 preventOverflow)、表单校验引擎(只提供样式与状态类,不内置校验规则)、Toast 组件依赖的完整 Popper 堆叠、以及 Bootstrap 的 Reboot 全量重置(保留自研 reset)。
build/build.mjs 增加体积预算(展开版 620 KB、压缩版 520 KB、JS 120 KB)与 JS 语法自检;build/check.mjs 提供 10 项可重复运行的检查(类名冲突、令牌引用、页面类名、断点覆盖、文档一致性、JS 语法、组件与样式对应、版本一致、体积预算)。新增 build/mini.mjs:按页面实际用到的类名裁剪出 plui-mini.css,组件类按族保留,工具类精确匹配,当前示例页裁剪后约 63 KB,比全量压缩版小约 85%。裁剪版只用于单页或页面集合确定的场景,常规站点仍用 plui.css。
正文与背景对比度 21:1,次级文本 7.5:1,弱化文本由 2.5:1 提到 4.8:1(--plui-color-text-faint 改用灰 500),暗色主题另配一套达标色值。模态框与离屏面板实现焦点陷阱与焦点归还,Esc 一律可关闭;浮层定位不依赖鼠标;prefers-reduced-motion 下动画与过渡降到 0.01ms;forced-colors 下补边框与焦点描边;打印样式隐藏浮层并露出链接地址。
样式层是增量升级,旧类名不受影响;但 src/plui.js 是破坏性重写,旧脚本里直接调用内部函数(而不是 plui.xxx 公共入口)的地方需要改写;同时 --plui-color-text-faint 的取值变化会让弱化文本看起来深一点。
本页由 build/build-docs.mjs 从同名 Markdown 生成,请修改 .md 后重新生成,不要手工编辑本文件。