在熟悉 HTML 和 CSS 的基礎後，進一步學習 CSS 進階技巧能讓你的網頁設計更加專業、具質感。本篇文章將介紹 CSS 命名與架構法則、模組化、效能優化技巧，以及常見問題與解法。
二、CSS 命名與架構法則
1. BEM（Block Element Modifier）
BEM 是一種命名規範，讓 CSS 結構更具一致性與可維護性。
- Block（區塊）：代表一個獨立的元件（如
card）。 - Element（元素）：隸屬於區塊的子元素（如
card__title）。 - Modifier（修飾符）：調整元件狀態或樣式（如
card--active）。
2. OOCSS（面向物件的 CSS）
OOCSS 強調將樣式拆分為結構與外觀兩部分，提升可重用性。
- 結構（Structure）：定義元件的骨架與佈局。
- 外觀（Skin）：處理顏色、字型、背景等樣式。
3. Atomic Design（原子設計）
Atomic Design 將介面元件分為五層，建立有系統的設計流程。
- Atoms（原子）：最小不可分的元件（如按鈕、標籤）。
- Molecules（分子）：將原子組合成簡單元件（如表單欄位）。
- Organisms（生物）：結合多個分子形成完整區塊（如導覽列）。
- Templates（範本）：定義頁面結構與佈局。
- Pages（頁面）：具體呈現內容與數據。
三、CSS 模組化與 Scoped Styles
1. CSS 模組化
將 CSS 拆分為獨立檔案，提升維護性與可讀性。
- 優點：避免全域樣式衝突、提升開發效率。
- 實踐：使用
@import、CSS Modules、PostCSS。
2. Scoped Styles（範圍樣式）
在元件框架中（如 React、Vue）使用 Scoped Styles，確保樣式僅作用於特定元件。
- React：使用 CSS Modules 或 Styled Components。
- Vue：使用
<style scoped>標籤。
四、CSS 效能優化技巧
1. Lazy Load（延遲載入）
僅在需要時載入資源，減少初始頁面載入時間。
- 圖片延遲載入：使用
loading="lazy"。 - 元件延遲載入：使用動態匯入（如 React 的
React.lazy）。
2. Critical CSS（關鍵 CSS）
僅在初始渲染時載入必要樣式，提升首次可視化速度。
- 工具：使用
critical套件或手動擷取關鍵 CSS。
3. CLS（Cumulative Layout Shift，累積版面位移）
避免元素動態載入導致的版面跳動，提升使用者體驗。
- 設定固定寬高：圖片、影片等媒體元素加上
width與height。 - 預留空間：使用
min-height、min-width。
五、常見問題與解法
1. z-index 疊加順序錯亂
- 問題原因：未正確設定元素的層級關係。
- 解法：確認元素的定位（如
position: relative），並合理設定z-index。
2. overflow 隱藏內容
- 問題原因：設定
overflow: hidden導致內容無法完整顯示。 - 解法：確認父元素高度、使用
overflow: auto。
3. position 定位問題
- 問題原因：絕對定位元素未參考正確父層。
- 解法：確認父層是否加上
position: relative。
4. 白屏效應（FOUT、FOIT）
- 問題原因：字型或樣式延遲載入，導致畫面閃爍。
- 解法：使用 Web Font Loader、Preload 字型資源。
掌握 CSS 命名規範、模組化、效能優化與解決常見問題，能讓你的前端開發更有效率、網站更具專業感。下一篇文章將探討更進階的前端技術，讓我們一起持續精進吧！