當完成一項前端的工作之後，許多人會忘記該專案的結構與細節。然而程式碼並不是馬上就能完全定型，在餘下的時間裡還有不斷的維護工作，而這些工作也許不會是你自己完成。所以，結構優良的程式碼能很大程度優化它的可維護性。以下列出五種提高CSS檔案可維護性的方法，也就是一種較好的CSS樣式指南。
1.分解你的樣式
對於小項目，在寫程式碼之前，按頁面結構或頁面內容將程式碼分成幾塊並給予註解。例如，可以分別將全域樣式、版面、字體樣式、表單、註解和其他分成幾個不同的區塊來繼續運作。
而對於較大的工程，這樣顯然不會有什麼效果。此時，就需要將樣式分解到幾個不同的樣式表檔案。下面的master stylesheet 就是這個方法的例子，它的工作主要是匯入其他樣式檔案。使用此方法不僅能優化樣式結構，而且有利於減少一些不必要的伺服器請求。而分解檔案的方法就有許多種，master stylesheet 使用了最常見的一種。
/*------------------------------------------------ ------------------ [Master Stylesheet] |
同時對於大型項目，你也可以加上CSS文件的升級標誌或一些診斷措施，這裡不再詳述。
2.建立CSS檔案索引
為了能夠迅速的了解整個CSS檔案的結構，在檔案開頭建立檔案索引是一個不錯的選擇。一個可行的方法是建立樹狀的索引：結構上的id 和class 都可以成為該樹的一個分支。如下：
| /*------------------------------------------------ ------------------ [Layout] * body + Header / #header + Content / #content - Left column / #leftcolumn - Right column / #rightcolumn - Sidebar / #sidebar - RSS / #rss - Search / #search - Boxes / .box - Sideblog / #sideblog + Footer / #footer Navigation #navbar Advertisements .ads Content header h2 ——————————————————————-*/ |
或者也可以這樣：
/*------------------------------------------------ ------------------ [Table of contents] -------------------------------------------------- -----------------*/ |
另一種方式可以只是先簡單的將內容列舉出來，也不需要縮排。下面的範例中，如果你需要跳至RSS部分你只需要簡單的搜尋8.RSS。
/*------------------------------------------------ ------------------ [Table of contents] -------------------------------------------------- -----------------*/ /*------------------------------------------------ ------------------ |
定義這樣一個樣式檢索可以很有效的使其他人閱讀學習你的程式碼變得容易。在製作大專案的時候，你也可以將檢索列印出來從而在你閱讀程式碼的時候方便查閱。