這一次的更新並沒有增加任何使用者可見的新功能，但它是整個專案開發歷程中我認為最重要的一次架構性調整。回顧當時的程式碼狀態，坦白說已經有些失控了——每個 HTML 頁面的 <style> 標籤裡都有一大段幾乎相同卻又不完全一樣的 CSS 規則，按鈕的圓角在 A 頁面是 4px、在 B 頁面變成了 6px、到了 C 頁面又變回 5px。沒有人刻意為之，但快速迭代的壓力讓這些不一致在不知不覺間累積了起來。
促使我正式動手清理的導火線是一個看似微小的需求：設計師希望將全站按鈕的主色調從 #3498db 調整為 #2980b9，順便統一所有按鈕的邊框半徑。如果樣式集中管理在一個檔案裡，這不過是改一行的事。但當時的實際情況是，我需要翻遍至少 7 個 HTML 檔案，逐一搜尋每一處用到該色值的地方。更棘手的是，有些地方用了十六進制色碼 #3498db，有些地方用了 rgb(52, 152, 219)，還有個別位置甚至直接寫在元素的 style 屬性裡。單純的全域搜尋替換根本無法安全地完成任務。
另一個問題是全域 CSS 選擇器的洩漏 (CSS Bleeding)。舉例來說，有一個頁面裡寫了 p { margin: 0; } 的重設規則，原意是針對該頁面內某個特殊區塊的段落文字。但由於這條規則直接針對標籤選擇器，當我後來將該頁面的部分 HTML 區塊移植到另一個頁面時，這條規則被一起帶了過去，意外地覆蓋了目標頁面原有的段落間距，導致版面瞬間走樣。排查這類問題極其耗時，因為你很難直覺地想到問題出在一段被複製過來的內聯樣式上。
我的重構策略分為三個步驟。首先，建立一個正式的 package.json 與 .gitignore，讓專案具備標準的 Node.js 專案結構。其次，將分散在各頁面的共用樣式全部抽取到 css/common.css 中集中管理。最後，為每個頁面的專屬樣式加上明確的作用域限制，避免規則外溢。
具體而言，我將所有共用的色彩值抽取為 CSS Custom Properties (自定義屬性)，統一定義在 :root 偽類下。同時，各頁面內部的樣式從直接針對 HTML 標籤選擇器，改為使用帶有頁面前綴的 class 選擇器。
<!-- index.html 內的內聯樣式 -->
<style>
p { margin: 0; line-height: 1.6; }
.btn {
background: #3498db;
border-radius: 4px;
color: white;
padding: 10px 20px;
}
</style>
<!-- train_location.html 內的內聯樣式 -->
<style>
p { margin: 10px 0; line-height: 1.8; }
.btn {
background: rgb(52, 152, 219);
border-radius: 6px;
color: #fff;
padding: 8px 16px;
}
</style><!-- css/common.css (集中管理) -->
:root {
--color-primary: #2980b9;
--color-text: #333;
--radius-sm: 4px;
--spacing-btn: 10px 20px;
}
.btn {
background: var(--color-primary);
border-radius: var(--radius-sm);
color: white;
padding: var(--spacing-btn);
}
<!-- 各頁面僅保留頁面專屬規則 -->
<style>
.page-train p { margin: 10px 0; }
</style>在同一次更新中，我也正式配置了 .gitignore 檔案。說來慚愧，在此之前專案的版本控制中混入了 node_modules 目錄的完整內容。這意味著每次 git clone 都要額外下載數十 MB 的第三方套件檔案，不僅浪費頻寬，也讓版本歷史變得臃腫。更嚴重的是，我一度不小心將一個 .apk 編譯產物提交到了 Repository 中（這個問題在後續的更新中才完全清除）。配置 .gitignore 後，node_modules/、dist/ 以及各類編譯產物都被正確排除在版本控制之外。
這次重構完成後，日常開發的體驗有了質的變化。以上述的「全站色調調整」需求為例，現在只需修改 :root 下的 --color-primary 一個變數，所有頁面就會自動同步更新。新建頁面時也不再需要複製貼上一大段樣式，只需引入 common.css 就能立即獲得完整且一致的基礎樣式系統。使用者雖然不會直接感知到這次改動，但後續每一個新功能能更快速地開發與上線，他們是最終的受益者。乾淨的架構是一切效率的起點，這是一條看似理所當然卻很容易被忽視的原則。