"Refactor"
- CSS Layers 取代 specificity 戰
用 @import url('vendor.css') layer(vendor) 把外部組件 CSS 包進低權層、自家 CSS 留在 unlayered 自動贏 — 不論 specificity 數值。本文展開取代 !important 與雙寫的方法。
- CSS / JS 拆出獨立檔案
Hugo template 內 inline CSS / JS 超過 30 行就值得拆檔、走 resources pipeline。本文展開拆檔的理由、步驟、與得益。
- CSS 變數定義位置統一
CSS 變數一次定義在離 root 最近的合適位置、其他地方只引用、不重複宣告。改 token 只動一處、避免散落多處難同步。
- runtime 量測模式統一
對齊基準上的所有元素、要嘛全部寫死、要嘛全部用 ResizeObserver 量測 — 不要混搭。混搭時某些字型 / theme 變化會打破對齊、且難以重現。
- 以 class toggle 取代 inline `display: none !important`
JS 用 `el.style.setProperty('display', 'none', 'important')` 是低層次 hack。在 CSS Layers 環境下、用語意化 class + JS toggle 可以更乾淨、更易 debug。
- setTimeout 輪詢換 MutationObserver
等元素出現的場景、用 MutationObserver 監聽 DOM 變化、看到目標就 disconnect — 沒延遲、CPU 不被輪詢吃。本文展開兩種等待機制的差異。
- Init function 是 orchestrator、職責拆出獨立 function
一個 init function 同時做多件事 → 按職責拆成多個獨立函式、各自有清楚的 input / output、init 退化為組合各職責的 orchestrator。Debug 時知道哪個壞了、也容易單獨重用。
- Pattern：起點當函式參數
把元件根當函式參數傳入 — `function setup(shell) { shell.querySelector(...) }`、外部呼叫 `forEach(setup)` 處理多實例。本文展開純函式設計與多實例支援的取捨。