决策清单

分两部分:已定决策(用户在 2026-10-27 给出的口径,以及本轮据此落地的实际做法)与仍待定项(尚未拍板,逐条列出候选项与影响)。

影响大小的口径:影响大=牵动几乎所有后续文件的写法,改起来成本高;影响中=影响一批文件但不改变整体架构;影响小=局部可调整。


一、已定决策

命名(2026-10-27)

D1 · 框架定位 → 通用工具型 + 组件库混合(2026-10-27)

参考 Bootstrap 的定位思路:以通用工具与栅格为基础,同时提供成套组件。既不做纯 utility-first 的原子化框架,也不只做组件库。

影响:组件层与工具层都保留;文档按「栅格 / 工具类 / 组件」三段组织;示例页覆盖两类。

D2 · 体系路线 → 组件化 + Bootstrap 式命名与栅格(2026-10-27)

组件层按 Bootstrap 的划分方式组织(容器、栅格、按钮、表单、导航、标签页、折叠、提示框、卡片、面包屑、分页、表格、徽标、下拉、模态),类名与栅格思路直接对标 Bootstrap,便于用户迁移认知。

影响:src/css/components/ 下 13 个组件文件;src/css/layout/ 负责容器与栅格;工具类提供零散微调。

D13 · 类名前缀 → 统一 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 用前缀天然避开。

D3 · 命名形态 → Bootstrap 式 BEM 变体(非严格 BEM),状态类 is- / has- 放行,js- 类放行(2026-10-27)

组件内部元素用「块__元素」写法,修饰用 -- 后缀;工具类用单用途短名。状态类允许 is- / has- 前缀,js- 类也允许,用于挂 JS 行为钩子。

实际落地:本版以 Bootstrap 的连字符风格为主(如 .plui-card-title、.plui-nav-tabs-link),is- / has- / js- 前缀在规范里放行但目前没有实际使用。

D4 · 响应式策略 → 五档、Bootstrap 5 断点取值、移动优先、媒体查询为主、不引入容器查询(2026-10-27)

档位媒体查询说明
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/。

D24 · 工具类命名 → Tailwind 式 .plui-{断点}:{属性}-{取值},断点段前置(2026-10-27)

工具类全面参考 Tailwind。断点段放在最前面而不是中缀,原因是 Tailwind 的取值里本来就有 sm / md / lg / xl(字号 sm、圆角 md、阴影 lg),中缀写法会产生「圆角 md」与「md 断点起圆角」同名的二义类名。栅格与组件层保留 Bootstrap 的中缀写法(.plui-col-md-6),两层约定各自封闭、不交叉。

D25 · 工具类生成 → 刻度表生成,源码进版本库,构建期只做拼接(2026-10-27)

工具类不再手写:build/generators/ 存放刻度表与分类生成器,build/gen-utilities.mjs 产出 src/css/utilities/ 与 src/css/responsive/ 的普通 CSS 源码,源码直接进版本库,构建期只负责拼接与压缩。理由是手写几千条原子类无法保证一致性(同一档位在不同文件里出现两种写法),而生成器可以先做类名重复自检再落盘。生成器纯 Node、零 npm 依赖。

D26 · 令牌分层 → 原始 / 语义 / 组件 / 主题四层,深色模式仍留位不做(2026-10-27)

在 D5 的单层令牌上扩成四层,深色模式本版依旧不做,但把主题层的覆盖点预留好:将来只要追加一段 [data-plui-theme="dark"] 覆盖语义层,组件与工具类不需要改动。

D5 · 令牌与主题 → 单层令牌、浅色主题、深色模式暂不做(2026-10-27,已由 D26 取代分层部分)

base/tokens.css 一层全局自定义属性,分原始值(--plui-color-gray-600)与语义值(--plui-color-text-muted)两组命名,语义值引用原始值。不做多主题与 prefers-color-scheme 深色模式。

影响:所有组件只引用语义令牌,换主题时只改 tokens.css;深色模式以后加是新增一层映射,不动组件。

D6 · 单位体系 → rem 为主、步进 4px 基数(2026-10-27 本轮实际做法)

间距档位 0 / 0.25rem / 0.5rem / 1rem / 1.5rem / 3rem,即 0 / 4 / 8 / 16 / 24 / 48px。字号用 rem。边框用 px(1px 不随字号缩放更符合极简风格)。未使用 clamp() 流式排版。

D7 · 栅格方案 → Flex 实现的 12 列栅格(2026-10-27 本轮实际做法)

行 .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 的对应关系。

D8 · 组件清单 → 首批 16 组(2026-10-27 本轮实际做法)

已实现:容器与栅格、排版、间距工具类、边框与背景工具类、按钮、表单控件、导航栏与标签页、折叠面板、提示框、卡片、面包屑、分页、表格、徽标、下拉菜单、模态框。

需要 JS 的只有标签页、折叠面板、下拉菜单、模态框、可关闭提示框、导航栏折叠六项。

D9 · 构建工具链 → 自写零依赖 Node 脚本(2026-10-27 本轮实际做法)

build/build.mjs(纯 ESM,零 npm 依赖)负责拼接与压缩;build/gen-utilities.mjs 负责生成重复度极高的工具类源码。压缩器是自己写的简易实现,去注释、去多余空白,按约定保留每块最后一条声明的分号。

不做预处理器,不联网装包。产物不做 source map。

D11 · 浏览器支持范围 → 按现代浏览器实现(2026-10-27 本轮实际做法)

用到了 CSS 自定义属性、calc()、clamp() 之外的现代选择器(:focus-visible)、accent-color、inset 简写。未做 IE 兼容,未做旧浏览器降级。 具体最低版本矩阵尚未逐项测定,属于待补项。

D12 · 发布形态 → 单文件全量版 + 版本号文件名 + 当前版本别名(2026-10-27 本轮实际做法)

dist/css/ 下同时提供 plui-0.1.0.css、plui-0.1.0.min.css 与别名 plui.css、plui.min.css。不分模块产物,不提供 CDN 链接,不发布 source map。版本号规则沿用语义化版本。

D10 · 文档形态 → Markdown 源文件 + 同名 HTML 静态页(2026-10-27 本轮实际做法)

站点上的 cPanel/LiteSpeed 会拦截 .md 直接访问,返回 403(这是服务器行为,不是文件问题)。因此每篇文档都同时提供一份同名 .html(由 build/build-docs.mjs 从 Markdown 生成),浏览器里直接看 HTML,Markdown 作为可编辑源文件保留。

生成器只覆盖常用 Markdown 子集(标题、段落、列表、表格、代码块、行内代码、粗体、链接、引用、分隔线),不是完整实现。

D14 · JS 依赖 → 只用用户上传的 src/common.js(sx 函数库),不引入 jQuery(2026-10-27)

用户上传的 src/common.js 是 sx 函数库(xueluo.cn),全局名 window.sx / window.SX,不是 jQuery。框架的交互层基于它的真实 API 编写。

详见 COMMONJS.md。

D15 · 视觉风格 → 白底黑线极简(2026-10-27)

D24 · 工具类命名 → 断点段前置,写成 .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 的中缀写法,两套命名各管一层、不混用。

D25 · 工具类来源 → 刻度表 + 生成器,生成结果直接进版本库(2026-10-27)

工具类共 8038 个类名,手写不现实,也不利于审查。做法是:build/generators/scales.js 存刻度表(间距、颜色、字号、圆角、阴影、层级、过渡),build/generators/<分类>.js 存属性定义,build/gen-utilities.mjs 生成 src/css/utilities/ 与 src/css/responsive/ 的源码。

生成结果直接进版本库(不跑构建也能读源码),生成器每次运行先做类名重复自检,重复即中止。改刻度只改 scales.js,不动生成后的文件。

D26 · 令牌结构 → 原始 / 语义 / 组件 / 主题 四层(2026-10-27)

v0.1.0 是单层令牌。v0.2.0 拆成四层:原始层写具体值,语义层给别名,组件层放组件参数,主题层预留覆盖。组件不写死色值,改主题时组件不用动。

语义色(红/黄/绿/蓝等)在极简风格里只出现在 1px 边框与文字上,不铺大面积色块;深色模式本版不做,但主题层的接法已在 docs/THEMING.md 写好。

D27 · 版本 → v0.2.0 为破坏性升级(2026-10-27)

工具类命名与档位都变了,属于破坏性变更,直接发 0.2.0,不做兼容别名。旧类名不做过渡保留,迁移对照表见 docs/README.md。


二、仍待定

D17 · 版本号规则与发布节奏(待定)

当前用语义化版本 0.1.0,但什么算 breaking change、是否跟随站点更新打 tag、是否发布到 npm 或 CDN,都没有定。

D18 · 深色模式与多主题(待定)

D5 定了「本版不做」,但以后做不做、以什么方式做(prefers-color-scheme 自动切换 / data-theme 手动切换 / 双套令牌文件)还没定。这条牵动 tokens.css 的分层方式,越晚定改动越小。

D19 · 最低浏览器版本矩阵(待定)

D11 只说了「按现代浏览器实现」,具体支持到哪一版(Chrome / Safari / Firefox / Edge 各多少)没有逐项测定。影响以后要不要引入构建期降级。

D20 · 组件增量与优先级(待定)

下一批做哪些组件还没定。候选:骨架屏、Toast(可复用 common.js 的 sx.pop)、抽屉、工具栏、头像、进度条、列表组、树形菜单、日期选择器、代码高亮。

D21 · 可访问性基线(待定)

本版只做了基本处理(:focus-visible 描边、标签页 / 折叠面板 / 模态框的 ARIA 属性由 plui.js 自动补齐)。是否要按 WCAG 2.2 AA 做完整过检、要不要引入无障碍测试清单,还没定。

D22 · 组件文档与代码同源(待定)

现在组件清单写在 docs/COMPONENTS.md 里,与源码是两份。是否要让文档从源码元数据自动生成,还没定。

D23 · 打包与分发形式(待定)

是否提供 npm 包、zip 下载、或者只留在站点上,还没定。


三、给用户的下一步提示

影响面最大的几条已经在 2026-10-27 全部定下,第一版已经按这些口径实现并上线。后续推进主要看这几条:

  1. D23 打包与分发——要不要给 zip 下载或 npm 包(v0.2.0 目前只发压缩包与站点产物)
  2. D20 组件优先级——下一批做哪些组件
  3. D18 深色模式——决定 tokens.css 以后要不要改成两层
  4. D19 浏览器矩阵——决定以后要不要引入构建期降级
  5. D17 版本与发布——决定产物的命名与留存策略

D28 · 暗色模式落地(2026-10-27)

四层令牌的主题层不再只是预留。新增 src/css/base/dark.css,覆盖语义层令牌即可让组件与工具类整体转深色。两种入口:data-plui-theme="dark" 手动指定,或不写属性跟随 prefers-color-scheme。原始色阶(bg-gray-100 这类)不跟随主题,深色适配要用语义类(bg-soft、text-muted、text-faint)。暗色下语义色自动提亮一档,保证边框与文字对比度。

D29 · JS API 对齐 Bootstrap 5 的用法(2026-10-27)

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 等便捷入口保留。

D30 · 组件覆盖对齐 Bootstrap 5 的清单(2026-10-27)

本轮补齐:离屏面板、滚动监听、占位块、按钮组(含勾选式)、输入组、浮动标签、选择框与范围尺寸、导航下划线与填充变体、图文元素(figure / blockquote / code / kbd / mark / abbr / initialism)、辅助类(比例盒 / 粘性 / 固定 / 清浮动 / 可见性)、暗色主题、打印样式、减少动效偏好、高对比度适配。

明确不做(并说明原因):脚手架与构建体系(框架只提供样式与交互层,不做打包器)、jQuery 插件形式(约束是不引 jQuery)、Popper 级别的浮层定位(自研定位引擎只做四向翻转,不做虚拟元素与 preventOverflow)、表单校验引擎(只提供样式与状态类,不内置校验规则)、Toast 组件依赖的完整 Popper 堆叠、以及 Bootstrap 的 Reboot 全量重置(保留自研 reset)。

D31 · 体积预算与按需裁剪构建(2026-10-27)

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。

D32 · 可访问性基线(2026-10-27)

正文与背景对比度 21:1,次级文本 7.5:1,弱化文本由 2.5:1 提到 4.8:1(--plui-color-text-faint 改用灰 500),暗色主题另配一套达标色值。模态框与离屏面板实现焦点陷阱与焦点归还,Esc 一律可关闭;浮层定位不依赖鼠标;prefers-reduced-motion 下动画与过渡降到 0.01ms;forced-colors 下补边框与焦点描边;打印样式隐藏浮层并露出链接地址。

D33 · v0.3.0 的兼容面(2026-10-27)

样式层是增量升级,旧类名不受影响;但 src/plui.js 是破坏性重写,旧脚本里直接调用内部函数(而不是 plui.xxx 公共入口)的地方需要改写;同时 --plui-color-text-faint 的取值变化会让弱化文本看起来深一点。

本页由 build/build-docs.mjs 从同名 Markdown 生成,请修改 .md 后重新生成,不要手工编辑本文件。