主操作按钮重复 4 次
bg-[#4f46e5]
bg-clinic
品牌颜色跨组件重复，应该获得稳定名字。
01 / 扫描结果
项目中的 5 个任意值病例
信息卡片重复 3 次
rounded-[18px]
rounded-panel
已形成一致组件语言，命名比记住 18px 更可靠。
浮层阴影重复 3 次
shadow-[0_12px_30px_rgb(15_23_42/0.18)]
shadow-soft
长参数重复时，复制粘贴最容易悄悄分叉。
一次性海报宽度只出现 1 次
w-[37rem]
w-[37rem]（保留）
局部、清晰、不会复用，方括号恰好是合适工具。
内容栏网格结构表达
grid-cols-[minmax(0,1fr)_18rem]
grid-cols-[minmax(0,1fr)_18rem]（保留）
下划线会转为空格；这个值描述局部布局，不必硬塞进全局主题。
03 / 重构前后
视觉不变，意图变清楚
组件预览
使用任意值设计评审提醒
明天下午三点，一起检查移动端卡片间距和主按钮状态。
重构只替换稳定、重复的值；组件的尺寸和颜色应保持一致。
代码变化
之前：值藏在类名里
class="
bg-[#4f46e5]
rounded-[18px]
shadow-[0_12px_30px_
rgb(15_23_42/0.18)]
"之后：类名表达角色
class="
bg-clinic
rounded-panel
shadow-soft
"@theme {
--color-clinic: #4f46e5;
--radius-panel: 1.125rem;
--shadow-soft:
0 12px 30px rgb(15 23 42 / .18);
}04 / @utility + VARIANTS
自定义能力，也能吃到状态前缀
我们没有写死一个“按钮组件”，而是注册两个小能力：pressable 负责按压反馈，action-ring 负责键盘焦点。
@utility action-ring {
outline: 4px solid
color-mix(in oklab,
var(--color-clinic) 38%, white);
outline-offset: 3px;
}
@utility pressable {
transition: transform 160ms;
&:hover { transform: translateY(-2px); }
&:active { transform: translateY(1px); }
}状态检查台
用鼠标悬停、按住按钮；再按 Tab 把焦点移入。状态文字不会只靠颜色表达。
指针：空闲
键盘焦点：无
按压：无
准备检查 hover、active 与 focus-visible
class="pressable focus-visible:action-ring"