暢談CSS編碼與組織技巧
本文向大家描述一下CSS編碼與組織技巧，主要包括組織你的樣式表，使用屬性縮寫，利用繼承和默認值，利用多個class和多元選擇符等內容，希望本文介紹對你的學習有所幫助。
淺談CSS編碼與組織技巧
這恐怕是許多開發者都關心的問題。我想，大概沒有什么魔法，可以保證一下就把你的樣式表縮小到百分之多少，但合理的CSS編碼與組織技巧，的確能夠幫助你的更有效率地寫出更清晰高效的代碼，自然，樣式表大小的縮減還能減少下載的時間。
組織你的樣式表
盡管我們有種種CSS的開發工具，比如TopStyle，比如StyleMaster，它們可以讓你對當前這個樣式表里面定義了哪些規則，涉及哪些class，哪些ID一目了然，但這不等于說你的樣式表就組織清晰了，隨寫，隨看，隨改大概是我們常用的開發方式，一開始樣式表還有點層次，后面這里加一點，那里加一點，就越來越亂了。所以不妨考慮規范一下你的寫作方式。
大概有兩種組織方式，一種是我們常用的，把所有的描述同一個元素(和它的子元素)的規則都放到一起來，那么如果需要查閱頁面中某個元素究竟受哪些規則影響的時候，就不必在整個樣式表中翻來翻去了。
另一種也值得參考，即，把描述某些特性的規則放到一處，把描述另一些特性的放到另一處，比如說關于顏色的定義，放到color.css文件中，描述字體的定義，放到font.css中，描述布局的定義，放到layout.css中，這也能讓你的樣式表結構清晰，方便理解。最大的優點是，如果你希望換一套配色方案，可以只修改一下color.css，完全不必擔心其他的規則是否會影響頁面的顏色。
在傳統的程序設計中，我們常常提到程序的風格是如何重要，培養良好的編碼風格甚至遠比掌握程序的語法和語義重要，盡管Web設計者不一定要掌握那些程序設計的技巧，但培養良好的CSS編寫風格的確是很有用的。
使用屬性縮寫
屬性縮寫的介紹可以參考51cto.com上的其它相關文章，這里我們來小結一下：
首先，有這么幾個常用的屬性縮寫：
font
background
list-style
margin
border
padding
多數是可以把幾個常規屬性合并到一起使用的，也就是說，可以給這些簡記屬性賦予好幾個值，每個值之間用空格分隔。
第三，margin,border和padding都遵循中順時針原則，如果給定了四個值，從上方開始每次順時針轉90度。
如果給定了三個值，則是上側一種，左右同一種，下側一種。
如果給定了兩個值，就是上下一種，左右一種。
如果只給了一個值，那就是都一樣。
簡記屬性（屬性縮寫）的使用，見仁見智，一方面，它的確是可以大大縮短代碼(如果用得頻繁的話)，另一方面，修改的時候又未免帶來不直觀和不方便。
利用繼承和默認值
同樣參見書寫高效的CSS中的相關章節，我想，這也得斟酌使用，首先，繼承和默認值在W3C標準中都沒有嚴格(must)的規定(BTW,就算有又如何呢？)，瀏覽器未必真的會像你預期的那樣去實現，某些屬性的默認值真的是0么？在所有瀏覽器里都是0么？需要反復嘗試后總結經驗；再者，如果代碼中含有過多的這樣的“隱喻”，就未免不大好讀了，某某元素會顯示出某某特性，乃是繼承自它的父元素……在編寫樣式表的當天你可能還清楚，過一段時間忘了，就會很奇怪為什么不曾定義這個規則卻又顯現出那個特性了。
所以建議，如果你要用到繼承和默認值來簡化代碼的話，最好寫下一些注釋予以說明。
利用多個class和多元選擇符
一個HTML元素可以屬于多個類，比如這樣：
ExampleSourceCode
- <tdclasstdclass="subtotalnegative">(-$422.72)</td>
你可以給“合總”的那些表格欄設定一個樣式，再給包含負數的那些表格欄設定一個樣式，把它們疊加在上面：
ExampleSourceCode
- .subtotal{font-weight:bold;}
- .negative{color:red;}
這種特性有時能夠讓你很靈巧地實現一些功能，即縮短了HTML代碼，又清晰了CSS規則。關于多個class的詳細說明(包括選擇符的兼容性測試..)請參考51cto.com的相關文章介紹。
小結
選擇一種CSS規則的組織方式，并堅持使用它！
謹慎地使用一些雖然能夠簡短代碼，但會影響可讀性的書寫方式！
適時地了解一些已經普遍實現的CSS2新特性，能夠大大方便你的設計！
【編輯推薦】
