想成為css專家，僅僅熟練使用CSS選擇符（selectors）是遠遠不夠的。還在於對工作的整體規劃，工作流程的掌握以及提高樣式表的可維護性和效率。在這篇文章裡Jina Bolton從12個頂尖設計師那裡精選出了10種css應用技巧推薦給大家。
最近，我一直在研究如何創建更具吸引力的樣式表的方法。用css可以創造出我們想要的美妙絕倫的網站，而寫css本身就是一種享受。
如何創造更具吸引力的樣式表？你的樣式表應該要有哪些特性？
幾個月前，我有幸出席了在美國俄勒岡州波蘭特舉辦的2007年網頁視覺大會。為了這次盛會，我研究了12位在網頁設計開發上有傑出貢獻的設計師。這次研究的結果，結合我自己工作經驗幫助我總結一套製作精美樣式表的好方法。
01.不要讓css有過多的標記
連結或匯入樣式表聽起來好像是一種無頭緒的工作。但是我想要強調為什麼這樣那麼重要。我看過很多的網站開發都有整潔的、組織嚴密的css文檔，但是慢慢的，由於可能達不到在短期內快速更新，或者直接懶得再去管理，這使得先前創建的精緻的樣式表變成了垃圾。
想像一下，你工作在需要發佈上百條內容的龐大網站上面。因為時間有限，所以你需要透過巢狀或排列css來進行快速修改或更新。一年一年的過去了，這種習慣維持著，直到一天你被告知這個網站要完全推翻重新設計（但是內容還是一樣）而且你只有一周的時間去創建（包括測試）。
通常，更新樣式表還算是一個非常簡單的方法。除非你長時間對網站零散的區域做修改。你就不能對網站樣式表結構有一個整體的把握。所以現在你有兩個辦法a把所有的內容進行整理，然後再一個月內重新設計（祝你好運）b 去找一份新工作。
不要讓你的工作變成這個樣子。連結或匯入你的樣式表不是那樣隨意的事情。創建乾淨整潔的樣式表，並保持下去，你的工作就會更開心。
注意：不要在你的樣式表裡加入太多標記。如果你試圖在每次更新或添加新內容的時候創建新的樣式表，那你肯定是自找麻煩。過多的連結和匯入樣式表會使消除bug工作變得異常困難，讓你的樣式表很難維持。大一點的網站分別建立不同部分的樣式表這是可以理解的。就是小心不要太走極端。
比較值得一提的是增加很多的樣式表，會增加更多的http請求，也可能會影響到後面的工作。此外，微軟ie6瀏覽器對32連接式樣表還有一定的限制。 .
02.語意不隻隻是個行業詞
要知道我不得不把它提上來說，語意會成為你的好朋友，除了選擇最合適的，最有意義的元素來表述你的內容外，還要確定你選擇class 和id屬性值。在本職工作外，還會讓你的生活變得簡單（這也會讓你工作團隊裡夥伴的生活變得簡單----如果你在一個團隊中工作的話）。看看下面的定義：
.l13k { color: #369; }
如果你剛來參加工作，你看到在這個css檔案裡，你會立刻找到這個class嗎？估計不太可能，因為這個類別的名稱可能是一種縮寫，所以這裡沒有一個準確的方法可以讓你立即說出來。或者可能是你把它放在那裡，今天你知道它的意思，但是你能保證過了很多年後還知道它的意思嗎？
現在，讓我們來看看這個定義：
.left-blue { color: #369; }
你可能立即很明確的知道這個class選擇符的用途就像你知道左邊欄藍色的模組在那裡一樣，所以這就表明它起作用了。我前面提到，可能你在一個星期的時間需要重新設計。在重新設計的時候，這個模組被放置到了右邊，而且還是紅顏色。這個類就不再有存在的價值了。所以現在不得不選擇，要嘛改變所有的屬性值，要嘛放著它不動。 （這可能導致更多的混亂。）
最好不要在你的類別屬性裡面去加入顏色或長寬的尺寸。你應該避免任何的屬性值都是直接的詞彙。 （例如box）直接屬性可以會導致內容的分離。
最後，讓我們來看看更恰當的命名規範：
.product-description { color: #369; }
這裡你可以看到。用這個樣式定義的product-description（產品說明），不管你怎麼改變，都很清楚。
03.加註釋的好處
如果你的註解組織良好，且在css的控制範圍，清楚的標註每節(section)。最好確保註釋視覺突出，以便在內容滾動、一目十行時快速定位，那麼註釋你的css文檔對你或其他人在以後的開發中都會有很大的幫助。大部分的基礎註解會提示為什麼這個規則會用在這裡。
提示和注意
添加註釋可以幫助你或以後的開發者避免不必要的混亂。保持這種習慣。看範例：
/* Turn off borders for linked images */
img { border: 0; }
時間和署名
一些設計師和開發人員喜歡在css文件最近更新中標明日子和時間，還有他們的名字和初始狀態。這些資訊可以提供給你誰參與了這些，也提示了最近的文檔是怎樣的。
/* Sushimonster Typography Styles
Updated: Thu 10.18.07 @ 5:15 pm
Author: Jina Bolton
-------------------------------------------------- --*/
這是個很好的主意特別是當你工作在一個團隊中，請記住，有些團隊需要省去這種信息（一些公司寧願在文檔裡不出現這些名字和日期。）所以，最好就是看一下是不是需要這種資訊。
組織分類
用註解簡單說明css裡的各個部分是個不錯的主意。例如，如果所有的標題類型都放在一起了，你就需要注視來區分他們。
/* HEADER
-------------------------------------------------- --*/
我稍後會在討論「區分不同類型」的時候詳細說明這個。
註釋加標
如果你的css文件在組織零散樣式的時候跟我上面說的一樣，註解加標可以幫助你在你想要找到那部分文件的時候變得更簡單。你可以用特徵符號、關鍵字然後找到最終結果。
/* =HEADER
-------------------------------------------------- --*/
這在長而複雜的樣式表中很有幫助。你可以在Stop Design裡讀到這個。 .
參考