css-modules

此技能為管理元件範疇樣式 (Component-scoped styles) 提供了強大的 CSS Modules 框架，專為需要維護 React 或 Vite 專案中模組化且封裝樣式的開發者所設計。透過在建置階段自動產生唯一的類別名稱，它能有效防止全域命名空間污染與 CSS 衝突，成為大規模設計系統與舊程式碼遷移的重要工具。

本工具簡化了現代建置管線的整合，原生支援 Lightning CSS，相較於傳統 PostCSS 設定能顯著提升效能。它包含針對 TypeScript 開發者的全面說明，確保將 CSS 模組匯入元件檔案時的型別安全。使用者可運用樣式組合 (Composition)、區域與全域範疇管理，以及特定的檔案命名慣例，維持樣式表的乾淨與易維護性。

• 自動產生唯一的類別名稱，實現真正的元件封裝並防止樣式外洩。

• 與 Vite 無縫整合，特別針對 Lightning CSS 轉譯器進行最佳化，處理瀏覽器前綴、巢狀結構與現代 CSS 轉譯。

• 透過 typed-css-modules 實現 TypeScript 整合，在開發過程中提供自動補全與型別檢查。

• 支援 composes 關鍵字，可在不同檔案間共享樣式定義，實踐 DRY (不要重複自己) 原則。

• 提供明確的區域與全域範疇控制機制，包含 :local 與 :global 選取器，實現細膩的樣式管理。

• 提供 CSS Modules 與 Tailwind CSS 等工具類別框架的對比指南，協助根據動畫複雜度或第三方元件樣式需求進行選擇。

• 最適用於建構複雜動畫、調整第三方元件樣式，或在封裝性至關重要的情況下重構舊有的 CSS。

• 相容標準的 .module.css 檔案命名慣例，以觸發自動化的建置階段處理。

• 包含 Vite 設定，允許開發者自定義生產環境打包的類別名稱模式，例如使用雜湊 (hash) 或描述性名稱加雜湊的格式。

• 建議在混合架構中使用，由 Tailwind CSS 提供全域設計工具，CSS Modules 處理各個元件特定的邏輯。