5.4 定制思路：定制度的四级裁决

5.4 定制思路：定制度的四级裁决

面对一条定制需求，第一件事不是动手改，而是判级：这需求动到框架的哪一层？本节把前两节的手段整理成四级阶梯——工具类层、CSS 覆盖层、变量层、深度改造层——级数越高成本越高、影响面越大。判错级（高射炮打蚊子，或抹布擦大楼）是定制返工的最大来源。

位置：定制章的收官，也是方法论的一案。它上承 5.1、5.2 的手段，下接第 7 章实战——案例页的每条定制需求都会先过这张裁决表。

四级阶梯全景

图 5-4 定制度四级阶梯

判级流程：三个问题定级

拿到需求先问三问。**第一问：现有工具类拼得出吗？**拼得出判一级。**第二问：是「值」的问题还是「规则」的问题？**只是换个色、调个圆角、改字体（框架暴露了变量），判二级；要动间距刻度、断点阈值、整套色板派生关系，判三级。**第三问：框架的设计假设还成立吗？**要增删组件结构、重定义工具类家族，判四级。

案例：一次真实的判级会议

背景：某内容平台启动改版，产品、设计、前端三方带来五条需求：一、全站主色换品牌紫；二、首页头图区标题用超大字号；三、文章正文行距放宽；四、运营后台要独立暗色主题；五、未来要做「无栅格的自由画布页」。

操作（逐条判级）：

// 需求一判三级：主色牵动全套派生（hover、浅色、强调、焦点环），CSS 变量覆盖会漏
$primary: #6a4fc4;
$theme-colors: map-merge($theme-colors, ("primary": $primary));

// 需求二判一级：超大字号是局部事实，display 类已备
​

<h1 class="display-1 fw-bold lh-1">把每行代码都写成证据</h1>
​

// 需求三判二级：正文行距是运行期变量，覆盖即可
body { --bs-body-line-height: 1.85; }

// 需求四判二级：官方暗色机制现成，后台根元素切 data-bs-theme=dark
// 需求五暂缓并记录：四级改造，等画布页立项时单独评估维护债
​

结果：五条需求落地为「三级一处、一级一处、二级两处、缓议一处」，全站只做了一次 Sass 编译，自定义 CSS 层不足三十行。

解读：判级的产出不是代码而是决策记录。需求五被显式判为「四级、暂缓」，避免了它混进改版包里悄悄升级成维护债——阶梯的真正价值在于让「不动手」也成为一种可交代的裁决。

变式：三个月后品牌色再微调（紫的饱和度降一档）。因为当初判了三级，这次只改一个色值重编译，全站派生色自动跟随；若当初用二级逐组件覆盖，此刻要在七处选择器里找齐旧值——判级正确的复利在此刻兑现。

⚠️ 常见坑：判级倒挂——用四级手段（fork 源码）做二级的事（换主色），或用一级手段硬拼三级的事（每个 col 手动加 style 改沟槽）。前者背上升级即冲突的长期债，后者制造几十处散装魔法值。判级的纪律就一句话：手段的层级与需求的层级对齐。

演练：四道判级题

阶梯听懂了不等于会用，当场过四条真实需求。先自己判，再看解析。

**题一：「列表页卡片之间的间距统一收紧一档」。**判一级。间距是工具类地盘，卡组外层 g-4 改 g-3、卡片底部 mb-3 改 mb-2 即可，动不到任何变量。若你判了三级，想一想：改全局间距刻度会让全站所有 g-3、mb-3 连坐，为一个列表页背全站的账，明显失衡。

**题二：「品牌升级，主按钮、链接、焦点环、浅色背景全部换成新青色」。**判三级。表面只是换色值，实际牵动 hover 态、active 态、浅色变体、焦点环一整族派生——这些关系定义在 Sass 映射里，逐处用 CSS 覆盖会漏。改 $primary 重编译一次，派生自动跟随。判二级的代价通常在一个月后显现：某个漏改的焦点环还留着旧色。

**题三：「只有营销落地页要 1440px 一档的内容宽度，其他页面不变」。**判二级偏三级的临界案。落点在 CSS 覆盖：给落地页根作用域覆盖 --bs-container-xxl 这类运行期变量即可；若发现还想要配套的 col-xxl-* 行为变化，才升三级动断点映射。临界案的判法是先走低级试探，验证覆盖不了再升级——升级的成本是单向的，下来容易上去难。

**题四：「我们想在每个卡片组件里加一条品牌水印线」。**判四级的边缘、但有三级半的解法。首选不是 fork 源码，而是封装自有卡片组件（模板层扩展，框架组件原样引），把水印做成自己的结构。深度改造留给「重定义整个组件家族」的场景，加一个装饰元素够不上动框架本体。

四题的共同回执：判级判的是影响面与手段的配比，不是技术难度。一级手段十分钟见效但只管一个元素；三级手段一次编译管全站，但要求构建环境与回归验证。把每条需求的判级写进决策记录（哪怕一行注释），半年后回看，你会感谢当初没让「顺手 fork 一下」进主干。

判级还有一个隐藏收益：它让「报价」变得可解释。需求方问「改个颜色为什么要三天」，答「这案判三级，牵动全套派生色，需要重编译加一轮回归」——层级、影响面、工期三件事对上号，谈判就从拉扯变成对表。反过来，判级记录也保护你：三个月后有人拿着旧需求问「当时为什么不做」，台账上写着「四级、暂缓、待画布页立项」，一行字顶一小时会议。

💡 一条经验律：需求里出现「全站」「统一」「整套」三个词之一，至少从二级起判；出现「就这一处」，先在一级里找手段。措辞本身就是量刑线索。

结案要点

• 四级阶梯：工具类、CSS 覆盖、Sass 变量、深度改造，成本与影响面递增；
• 判级三问：拼得出吗、是值还是规则、设计假设还成立吗；
• 决策记录与「暂缓」同样是裁决产出；
• 判级倒挂是维护债的源头：高射炮打蚊子与抹布擦大楼同罪；
• 本章完结，下一章进入进阶审理：脚本交互、无障碍、性能与构建。