CSS 格式化 是指將 CSS（層疊樣式表） 的代碼進行排版和縮排，使其更加易讀、易於維護和協作。格式化 CSS 有助於清晰地顯示各種選擇器、屬性和值之間的關係，並提高代碼的可讀性，這對於開發者在處理大型樣式表或多人協作時尤為重要。
1. CSS 格式化的原則
CSS 格式化的核心目的是讓代碼結構清晰，便於理解和維護。這通常包括以下幾個方面：
縮排（Indentation）：每個 CSS 規則塊及其內容應該有一致的縮排。
換行（Line Breaks）：適當的換行可以幫助區分每一個屬性，使其更容易被識別。
統一風格：保持一致的屬性書寫順序、空格使用、括號放置等，這有助於提高代碼的可讀性。
2. CSS 格式化範例
a. 未格式化的 CSS
css
body{background-color:#f0f0f0;color:#333;margin:0;padding:0}.header{font-size:24px;color:#000;margin-bottom:20px;}
b. 格式化後的 CSS
css
body {
background-color: #f0f0f0;
color: #333;
margin: 0;
padding: 0;
}
.header {
font-size: 24px;
color: #000;
margin-bottom: 20px;
}
3. CSS 格式化的技巧
以下是一些常見的 CSS 格式化技巧，有助於使 CSS 代碼更易於維護：
每個選擇器使用一行 每個選擇器和其屬性應該清楚地分開，並放在單獨的一行上，這樣更容易查看。
css
.button {
background-color: blue;
color: white;
border-radius: 5px;
}
屬性與值之間使用一致的間距 屬性和值之間應該有一致的空格，以保持一致性和易讀性。
css
.container {
width: 100%;
margin: 0 auto;
}
保持選擇器的順序 如果你有多個選擇器，保持一致的順序（如按字母順序、功能分類等）可以提高可維護性。這有助於開發者快速定位樣式規則。