这两个星期我一直在做同一件事：把喜欢的一个博客，逐模块还原成自己的实现。文章卡片、侧边栏、目录、代码块、页脚，一个都不放过。现在回头看，收获比预想的大。

差距全在数值里

第一版我凭感觉写，结论是"看着不太对，但说不上来哪里不对"。后来改成先抓参考站的真实 CSS，再逐条对齐，问题立刻变得可描述了：

  • 卡片圆角是 12px 不是 16px
  • 侧栏吸顶位置是 calc(60px + .625rem)，不是 60px
  • 悬停位移只有 1px，我原来写了 6px，显得廉价
高级感几乎总是藏在 1 到 4 像素的差值里。凭印象做设计，会系统性地把这些细节做过头。

动效要克制

一开始我给卡片加了弹性缓动和位移，看着很"活泼"。对了一遍参考站才发现人家只做透明度过渡。

花哨的动效不是加分项，是噪声。真正需要动效说明状态的地方——比如目录高亮跟随、标签云超出高度时的渐隐遮罩——反而值得花时间。

截图是最快的验证手段

无头浏览器一行命令出图，再和参考站裁成同一区域上下拼在一起，眼睛会立刻指出差异。

BASH
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless=new --window-size=1400,1200 --screenshot=/tmp/our.png \
  --virtual-time-budget=6000 'http://127.0.0.1:8899/'

这比读几十行 CSS 找问题快得多，也比"肉眼在浏览器里刷新看看"可靠得多。

精简比补齐更难

参考站导航里有友链、音乐馆、相册。我没有这些内容，第一版诚实地做了过去，于是得到一排点进去就是 404 的死链。

后来定了条规矩：没有可用目标的入口一律不放。导航少了三项，界面反而更干净。

还没做完的

暗色模式还有几处对比度不够，移动端的图标墙只做了虚化处理。不过这些是打磨，不是骨架了。