CSS代碼的格式化是指在編寫CSS代碼時，按照一定的格式排列代碼并加上注釋，提高代碼可讀性、易維護性的過程。

在編寫CSS代碼時，我們通常會遇到以下一些情況：有些代碼太長，一行顯示不下；有些代碼需要跨行書寫；有些代碼需要注釋說明。

/* 以下是一個典型的需要格式化的CSS代碼 */
.header {
background-color: #eeeeee;
font-size: 24px;
text-align: center;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0;
}
.nav li {
margin-right: 20px;
}
.link:hover {
text-decoration: underline;
}
@media screen and (max-width: 768px) {
.nav {
flex-direction: column;
}
}

以上CSS代碼雖然能夠正常使用，但是在代碼的可讀性和易維護性方面卻存在一些問題。例如，第一條樣式規則過長，在瀏覽器窗口縮小時需要滾動條才能看到完整的代碼；標簽、屬性、屬性值之間缺乏一定的縮進和換行，不便于閱讀。

因此，我們可以采取一些措施來格式化CSS代碼，例如：

• 將每個樣式規則獨立成一行；
• 為每一個屬性和屬性值加上縮進；
• 為每一組選擇器添加換行；
• 為整個代碼添加注釋。

經過格式化的CSS代碼如下：

/* 頭部樣式 */
.header {
background-color: #eeeeee;
font-size: 24px;
text-align: center;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
/* 導航欄樣式 */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0;
}
.nav li {
margin-right: 20px;
}
/* 鏈接鼠標懸浮效果 */
.link:hover {
text-decoration: underline;
}
/* 響應式樣式 */
@media screen and (max-width: 768px) {
.nav {
flex-direction: column;
}
}

通過以上的格式化方法，我們可以更加清晰地看到每一個樣式規則，并且便于后續的修改和維護。因此，在編寫CSS代碼時，我們要時刻牢記格式化的重要性，讓我們的代碼更加友好、更加易懂。