css-modules

CSS Modules 技能為現代 React 與 TypeScript 應用程式提供了強大的樣式架構。它專注於透過在構建時生成局部作用域的類別名稱來實現真正的元件封裝，有效消除全域命名空間的衝突。此技能特別針對利用 Vite 的高效能前端環境進行了優化，提供 Lightning CSS（推薦因其卓越的轉換速度）與傳統 PostCSS 工作流程的深度配置模式。對於管理複雜動畫、樣式化第三方 UI 函式庫，或執行從舊版全域 CSS 架構遷移到可維護模組化系統的開發人員而言，這是理想的解決方案。透過使用組合模式，開發人員可以在不犧牲隔離性的前提下共用樣式，確保設計系統保持可預測性與模組化。此技能還填補了樣式定義與靜態型別之間的鴻溝，提供生成 TypeScript 定義檔的設定，為類別名稱提供自動完成，並防止開發過程中的參照錯誤。它作為對 *.module.css 命名規範映射、配置構建時類別名稱模式以及在樣式必須在元件邊界之外時實作全域脫逃通道的完整參考。無論您是在建置高度互動的動畫還是架構大型設計系統，此技能都能為高效、無衝突且型別安全的樣式設計提供必要的營運模式。

• 使用唯一的構建時雜湊碼進行 CSS 類別的自動局部作用域化

• 與 Vite、Lightning CSS 與 PostCSS 加載器的進階整合

• 透過生成的 TypeScript 定義檔實現型別安全的樣式匯入

• 用於跨元件樹共用樣式邏輯的組合模式

• 支援複雜選擇器策略，包括 :local 與 :global 作用域

• 用於跨瀏覽器相容性的供應商前綴與現代語法轉譯

• 針對開發與生產環境的類別名稱模式自訂

• 適用場景：複雜元件動畫、第三方元件樣式化與舊版 CSS 遷移

• 輸入：遵循 *.module.css 規範的元件專屬 CSS 或 SCSS 檔案

• 輸出：封裝後的 CSS 套件與 React 元件使用的匯入式 JavaScript 樣式物件

• 限制：需要 Vite 或相容於模組的打包工具來處理類別名稱轉換

• 優化建議：使用 Lightning CSS 取代 Autoprefixer，可將構建效能提升高達 100 倍

• 專家建議：採用混合方法，結合 Tailwind CSS 處理佈局工具類別，並利用 CSS Modules 處理元件特定邏輯