章節連結
這回為了要在短時間內，於既有的義大利醬料式的網站上，加上一個新功能。看見其複雜且耦合度極高的 CSS, JS 和 HTML 檔案，實在難以下手。這邊筆記下一些經驗證可行的作法。
內容
HTML
1. 所需要的固定內容，可以直接寫於 html 內，再給予適當的邏輯和 CSS 來控制顯示 display: none 與否即可
2. 可搭配 Tailwind CSS 的 CDN 模式，讓你快速產出一組可供使用的獨立環境，無需先行撰寫 CSS 或是 SCSS 檔案。等初步完成後，再手動對照轉譯成 CSS 或是 SCSS 模式。Tailwind 的線上 Playground 環境，你只要將 Tailwind 程式碼貼到其中，當你點選 base 時，你就會看到你所用的 Preflight 有多少了
3. 若你 JS 對外暴露到 window 的方法是用 window.moduleName.method1 來執行的話，那你的 onClick 之類的寫法要改成 “window.moduleName.method1()”。請小心不要忘記 ()，否則無法正常執行
CSS
1. 藉助 CSS 的 id Selector 權重遠大於 class 的狀態下，將你新撰寫的 CSS，給包在這個 id 下，以盡可能的形成一個相對不受干擾的 CSS 環境
2. 新寫入的 CSS，需避免使用 rem 而使用 px 絕對單位。因早期的套件樣式 ( 如 Bootstrap 3 系列 )，就在 HTML 根目錄設定 font-size 為 10px。這大大影響後續新加入的 CSS 內容，因為 Tailwind CSS 預設的 Preflight 以及一連串的數字都是基底在 16
3. 為了維持新加入的樣式能以基底為 16px 的單位來進行顯示，在你包起來的 id 第一層，要記得設下基準值 font-size: 16px
JavaScript
1. 將新加入的 JS，運用 IIFE 的模式來進行封裝保護，最後對外暴露的方法綁在 window 上即可
2. 若瀏覽器有報 [Violation] ‘setTimeout’ handler took <N>ms ，可予以忽略
