P323 · 任务流程

保存全局设计规则与页面差异

Persist a master design system with page-specific overrides

共享规则集中维护,页面只保存差异;读取时明确覆盖、继承和文件缺失的处理。

编辑审核

以下文件、覆盖规则和输出是本站编写的教学材料,不是上游运行结果或模型实测结果。

使用场景

你要实现结账页。项目已有共享字体、文字颜色和按钮间距,但结账页的按钮需要更大的内边距。希望下次会话仍能找到共享规则和这个例外,而不是从多份完整副本中猜哪一份有效。

教学项目根目录下有两个文件。design-system/shop/MASTER.md 保存共享规则:

button.padding=12px
text.color=#0F172A
body.font_size=16px

design-system/shop/pages/checkout.md 只保存结账页差异:

button.padding=16px

教学约定:按完整字段名覆盖,页面中具名字段优先,未提及字段继承主文件。该规则用于补全示例的合并语义,不表示上游已经规定了这种实现。

具体做法

  1. 确认项目根目录和当前页面名 checkout,先读取主文件;主文件缺失时报告无法取得共享基线,停止据此生成设计。
  2. 查找该页面的差异文件。文件不存在时只使用主文件;存在但无法读取时报告错误,不把读取失败当作没有例外。
  3. 按上述字段级约定合并:只替换页面明确列出的字段,其余字段保留主文件值。
  4. 列出最终有效规则及各值来源,再据此实现页面。共享规则更新时修改主文件,页面差异文件只维护仍然需要的例外。

反例

使用上述同一组文件实现结账页:

把 MASTER.md 的全部内容复制到 checkout.md,以后每个页面各自修改。实现时只读取 checkout.md,没有写出的共享字段自行选择,不记录值来自哪里。

完整副本会让共享字段在多个文件中独立变化;只读页面文件又会把未列出的字段误当作没有规则。

改进写法

实现 checkout 页面。路径均相对于项目根目录。
读取 design-system/shop/MASTER.md,再查找 design-system/shop/pages/checkout.md。
教学合并规则:页面具名字段覆盖同名主字段;未提及字段继承主文件。
页面文件不存在时只用主文件;主文件缺失或现有文件无法读取时报告缺失/读取错误,不猜默认值。
先输出最终 button.padding、text.color、body.font_size 及各自来源,再按这些规则实现。
不要向页面差异文件复制全部共享字段。

套用时替换项目目录、页面名和你要维护的字段,同时写明自己的覆盖约定。给定材料的示意结果是:

字段 最终值 来源
button.padding 16px 页面文件
text.color #0F172A 主文件
body.font_size 16px 主文件

为什么这样改

主文件保存一份共享基线,页面文件只表达例外。明确覆盖粒度后,执行者知道什么被替换、什么继续继承;列出来源则让下次会话可以重建同样的有效规则,而不是凭页面外观猜数值。

如何验证

根据上述文件手工核对三个最终值。移除页面文件后,应得到主文件的 12px、#0F172A、16px;只修改主文件的文字颜色后,结账页应继承新颜色,按钮仍为 16px。主文件缺失时必须报告无法取得基线。

如果已经生成页面代码,再检查实际样式是否采用这些有效值。读取文件和列出规则,只证明资料已被正确合并,不能替代运行时样式检查。

适用边界

上游提出主文件加页面覆盖,但没有完整规定字段级合并或整体替换语义,使用前必须明确约定。重复字段、删除字段等情况应由项目规则另行定义。保存文件不会保证后续会话主动读取它,也不会自动验证颜色、间距或可访问性是否合适。

原文与版本

如何收录这些方法