這批東西是什麼
2015 年前後在一間公司當網頁設計師時做的活動網頁。純 HTML / CSS / jQuery，沒有打包工具、沒有框架、沒有版本控管。那個年代市場上還沒有「前端」「後端」這種職稱，一個人從 Photoshop 切版到 jQuery 特效全包。
53 個活動資料夾，自己寫的 CSS 有 194 個檔、28917 行。
為什麼現在把它挖出來
檔案放了十年，打開全部跑版——CDN 收掉了、圖片路徑斷了、jQuery 根本載不到。
修的過程本身是另一回事。用無頭瀏覽器逐頁量 159 個頁面，修之前 770 張圖裡有 248 張壞掉、634 個請求失敗、140 頁有 JS 錯誤。修完之後是 5 張壞圖、68 個失敗請求、23 頁有 JS 錯誤。剩下的多半修不動——例如一批銀行 logo 的原始檔已經永久遺失。
真正的收穫是修完之後做的一件當年沒做過的事：把它量一遍。
量出來的東西比作品本身有意思。
用色很嚴，間距很鬆
同一批檔案，兩個方向差非常多。
| 項目 | 數量 | |
|---|---|---|
| 不重複用色 | 20 種 | #cccccc 用 643 次、#424242 223 次、#ff7600 179 次 |
| 不重複的 margin / padding 值 | 320 種 | 只有 29% 是 5 的倍數 |
一個人不會在同一份檔案裡一半有紀律一半沒有。差別在有沒有來源——顏色是設計稿決定的，我照著執行；間距沒有人決定，是對著螢幕一次一次微調出來的。
字級那邊倒是有意識的選擇：font-size 用 em 290 次、用 px 只有 80 次。em 是相對單位、會跟著父層縮放，px 是寫死的絕對值。2015 年多數人為了「所見即所得」全部寫 px，這裡以 em 為主力。
col-0 那件事
53 個活動裡，只有一個用 media query 做響應式（@media 依螢幕寬度換版型，見 RWD）。其餘全部是 layer_d.css 和 layer_m.css 拆兩份檔，桌機一份、手機一份。
那唯一的例外是 event_agirlsaotter_bootstrap。而同一個活動 event_agirlsaotter 也存在——舊做法那版。同一個東西做了兩遍，第二遍改用 Bootstrap 3 重寫。
重寫那版裡有一個手寫的 grid.css，207 行、18 個 media query，開頭第一行註解是：
/* define bootstrap 0 columns */它定義了六組欄位：0、5、7、9、10、11，靠 float 加百分比寬度排版——十年後這件事一行 CSS Grid 就解決了。斷點用 768 / 992 / 1200，是 Bootstrap 3 自己的標準值，沒有另外發明。
拿一份 Bootstrap 3.3.4 未壓縮版比對（跟當年載的 3.3.0 最接近）：
| 定義的欄位 | Bootstrap 3 本來有嗎 |
|---|---|
col-*-5、7、9、10、11 | 有，官方本來就給了 |
col-*-0 | 沒有，官方確實沒這個 |
所以那 207 行裡，五組是重寫了早就存在的東西，一組是真的補了官方沒有的。
有意思的是哪五組被重寫。沒被重寫的是 1、2、3、4、6、8、12——正好是教學和範例裡最常出現的那批（12÷2=6、÷3=4、÷4=3、÷6=2）。被重寫的 5、7、9、10、11，是範例裡幾乎不會出現的尷尬數字。
那是靠看別人的原始碼學會、而不是靠文件學會，會留下的痕跡。從能觀察到的樣本反推出 n/12 這條公式——而且六組的百分比全部算對：41.666% / 58.333% / 75% / 83.333% / 91.666%。等到需要一個 5 或 7，以為那不存在，就自己算了一個。
col-0 那組還多做對一件事。它用的是：
.col-xs-0 { width: 0%; float: left; }不是 display: none。後者會讓元素脫離排版流，把後面的欄位往前擠位；width: 0 保持在流裡，位置不會亂。這個選擇在任何人的網頁原始碼裡都看不到——沒有人的 CSS 會告訴你「我考慮過 display:none 但會擠位」。那是撞過才知道的。
effect.js：想做特效庫，做成 54 份複製
另一半的企圖是一套共用的 jQuery 特效庫，檔案叫 effect.js。
- 被 54 個活動使用
- 但有 50 個不同版本
- 最短 3 行、最長 777 行、平均 93.7 行
共用的意圖有了，收斂的機制沒有。每個新活動的做法是把上一個活動的 effect.js 複製過來改一改，改完就地存著。複製 54 次，長出 50 個版本。
jQuery 自己用 $.fn 一個擴充點解掉了同一個問題——別人要加方法就掛在 $.fn 上，不用動 jQuery 本體。這批 code 沒有那個擴充點，所以只能複製。擴充點跟 Decorator 的差別在於「誰決定要加什麼」：Decorator 是我事先包好，擴充點是別人自己掛上來。
當年缺的不是想法
grid.css 想建一套公司內部的響應式規則，effect.js 想建一套共用特效庫。兩件事的方向都對，都停在同一個地方：規則建出來了，但沒有東西撐著它。
沒有版本控管，所以複製比引用容易。沒有建置流程（為什麼需要打包工具講的正是這一段），所以沒辦法從一份來源產生多份輸出。沒有回歸驗證，所以改了共用的部分不知道會不會弄壞別的活動。
這也不完全是能力問題。2015 年 Sass 有了，但 Design Token、Style Dictionary、Storybook、視覺回歸測試全部還不存在。想做的那件事，當年沒有工具做得到。
量測方式
本頁所有數字都是在修復後的 repo 上實際跑指令得出的，不是回憶：
- CSS 統計：以檔名排除 vendor 檔（bootstrap / jquery 外掛 / normalize / animate 等）後，只計自己寫的 194 個檔。此法可能有零星誤判，但 em/px 比例與用色數量級夠大，誤判不影響結論。
- Bootstrap 3 欄位比對：用本機一份
bootstrap.cssv3.3.4 未壓縮版，直接 grep.col-md-5/.col-md-11/.col-md-0。當年載的是 CDN 上的 3.3.0，本機無副本。 effect.js版本數：對 54 個檔案取 md5 後去重得 50。- 修復前後對照：以 headless 瀏覽器逐頁載入 159 個頁面，記錄壞圖數、失敗請求數、JS 錯誤頁數；前後兩份快照留存為 JSON，本頁數字直接從那兩份檔案彙總。
依我自己的四級驗證分級，以上屬 A 級（可指回檔案與指令）。「當年想做一套公司內部規範」這句屬 D 級——是我的回憶，沒有當年的文件佐證。