淺談CSS編碼與組織技巧

　　如何讓 CSS 代碼簡潔而易於編寫？這恐怕是許多開發人員都關心的問題。我想，大概沒有什麼魔法，可以保證一下就把你的樣式表縮小到百分之多少，但合理的 CSS 編碼與組織技巧，的確能夠協助你的更有效率地寫出更清晰高效的代碼，自然，樣式表大小的縮減還能減少下載的時間。
組織你的樣式表
　　儘管我們有種種 CSS 的開發工具，比如 TopStyle，比如 StyleMaster，它們可以讓你對當前這個樣式表裡面定義了哪些規則，涉及哪些 class，哪些 ID 一目瞭然，但這不等於說你的樣式表就組織清晰了，隨寫，隨看，隨改大概是我們常用的開發方式，一開始樣式表還有點層次，後面這裡加一點，那裡加一點，就越來越亂了。所以不妨考慮規範一下你的寫作方式。
　　大概有兩種組織方式，一種是我們常用的，把所有的描述同一個元素 (和它的子項目) 的規則都放到一起來，那麼如果需要查閱頁面中某個元素究竟受哪些規則影響的時候，就不必在整個樣式表中翻來翻去了。
 
　　另一種也值得參考，即，把描述某些特性的規則放到一處，把描述另一些特性的放到另一處，比如說關於顏色的定義，放到 color.css 檔案中，描述字型的定義，放到 font.css 中，描述布局的定義，放到 layout.css 中，這也能讓你的樣式表結構清晰，方便理解。最大的優點是，如果你希望換一套色彩配置，可以只修改一下 color.css，完全不必擔心其他的規則是否會影響頁面的顏色。
　　在傳統的程式設計中，我們常常提到程式的風格是如何重要，培養良好的編碼風格甚至遠比掌握程式的文法和語義重要，儘管 Web 設計者不一定要掌握那些程式設計的技巧，但培養良好的 CSS 編寫風格的確是很有用的。
使用屬性縮寫
　　屬性縮寫的介紹可以參考上的其它相關文章，這裡我們來小結一下： 
　　首先，有這麼幾個常用的屬性縮寫： 
　　　font 
　　　background 
　　　list-style 
　　　margin 
　　　border 
　　　padding 
　　多數是可以把幾個常規屬性合并到一起使用的，也就是說，可以給這些簡記屬性賦予好幾個值，每個值之間用空格分隔。
　　第三，margin, border 和 padding 都遵循中順時針原則，如果給定了四個值，從上方開始每次順時針轉 90 度。