想成為一名css專家，僅僅熟練使用CSS選擇符（selectors）是遠(yuǎn)遠(yuǎn)不夠的。還在于對工作的整體規(guī)劃，工作流程的把握以及提高樣式表的可維護(hù)性和效率。在這篇文章里Jina Bolton從12個頂尖設(shè)計(jì)師那里精選出了10種css應(yīng)用技巧推薦給大家。

　　最近，我一直在研究如何創(chuàng)建更具吸引力的樣式表的方法。用css可以創(chuàng)建出我們想要的美妙絕倫的網(wǎng)站，而寫css本身就是一種享受。

　　如何創(chuàng)建更具吸引力的樣式表？你的樣式表應(yīng)該具有哪些特性？

　　幾個月前，我有幸出席了在美國俄勒岡州波蘭特舉辦的2007年網(wǎng)頁視覺大會。為了這次盛會，我研究了12位在網(wǎng)頁設(shè)計(jì)開發(fā)方面做出杰出貢獻(xiàn)的設(shè)計(jì)師。這次研究的結(jié)果，結(jié)合我自己工作經(jīng)驗(yàn)幫助我總結(jié)出一套制作精美樣式表的好方法。

　　01.不要讓css有過多的標(biāo)記

　　鏈接或者導(dǎo)入樣式表聽起來似乎是一種無頭緒的工作。但是我想要強(qiáng)調(diào)為什么這個那么重要。我看過很多的網(wǎng)站開發(fā)都有著整潔的、組織嚴(yán)密的css文檔，但是慢慢的，由于可能達(dá)不到在短期內(nèi)快速更新，或者直接懶得再去治理，這使得先前創(chuàng)建的精致的樣式表變成了垃圾。

　　想象一下，你工作在需要發(fā)布上百條內(nèi)容的龐大網(wǎng)站上面。因?yàn)闀r(shí)間有限，所以你需要通過嵌套或者排列css來進(jìn)行快速修改或更新。一年一年的過去了，這種習(xí)慣維持著，直到一天你被告知這個網(wǎng)站要完全推翻重新設(shè)計(jì)（但是內(nèi)容還是一樣）而且你只有一周的時(shí)間去創(chuàng)建（包括測試）。

　　通常，更新樣式表還算是一個非常簡單的方法。除非你長時(shí)間對網(wǎng)站零散的區(qū)域做修改。你就不能對網(wǎng)站樣式表結(jié)構(gòu)有一個整體的把握。所以現(xiàn)在你有兩個辦法a把所有的內(nèi)容進(jìn)行整理，然后再一個月內(nèi)重新設(shè)計(jì)（祝你好運(yùn)）b 去找一份新工作。

　　不要讓你的工作變成這個樣子。鏈接或者導(dǎo)入你的樣式表不是那樣隨意的事情。創(chuàng)建干凈整潔的樣式表，并保持下去，你的工作就會更開心。

　　注重：不要在你的樣式表里加入太多標(biāo)記。假如你試圖在每次更新或者添加新內(nèi)容的時(shí)候創(chuàng)建新的樣式表，那你肯定是自找麻煩。過多的鏈接和導(dǎo)入樣式表會使消除bug工作變得異常困難，讓你的樣式表很難維持。大一點(diǎn)的網(wǎng)站分別建立不同部分的樣式表這是可以理解的。就是小心不要太走極端。

　　比較值得一提的是添加很多的樣式表，會增加更多的http請求，可能還會影響到后面的工作。此外，微軟ie6瀏覽器對32連接式樣表還有一定的限制。.

　　02.語義不僅僅只是個行業(yè)詞

　　要知道我不得不把它提上來說，語義會成為你的好朋友，除了選擇最合適的，最有意義的元素來表述你的內(nèi)容外，還要確定你選擇class 和id屬性值。在本職工作外，還會讓你的生活變得簡單（這也會讓你工作團(tuán)隊(duì)里伙伴的生活變得簡單----假如你在一個團(tuán)隊(duì)中工作的話）�？纯聪旅娴亩�義：

　　.l13k { color: #369; }

　　假如你剛來參加工作，你看到在這個css文件里，你會馬上找到這個class嗎？估計(jì)不太可能，因?yàn)檫@個類的名稱可能是一種縮寫，所以這里沒有一個準(zhǔn)確的方法能夠讓你立即說出來�；蛘呖赡苁悄惆阉�放在那里，今天你知道它的意��，但是你能保證過了很多年后還知道它的意思嗎？

現(xiàn)在，讓我們來看看這個定義：

　　.left-blue { color: #369; }

　　你可能立即很明確的知道這個class選擇符的用途就像你知道左邊欄藍(lán)色的模塊在那里一樣，所以這就表明它起作用了。我前面提到，可能你在一星期的時(shí)間需要重新設(shè)計(jì)。在重新設(shè)計(jì)的時(shí)候，這個模塊被放置到了右邊，而且還是紅顏色。這個類就不再有存在的價(jià)值了。所以現(xiàn)在不得不選擇，要么改變所有的屬性值，要么放著它不動。（這可能導(dǎo)致更多的混亂。）

　　最好不要在你的類屬性里面去加入顏色或者長寬的尺寸。你應(yīng)該避免任何的屬性值都是直接的詞匯。（比如box）直接屬性可以會導(dǎo)致內(nèi)容的分離。

　　最后，讓我們來看看更恰當(dāng)?shù)拿�名�?guī)范：

　　.product-description { color: #369; }

　　這里你可以看到。用這種樣式定義的product-description（產(chǎn)品描述），不管你怎么改變，都很清楚。

　　03.加注釋的好處

　　假如你的注釋組織良好，且在css的控制范圍，清楚的標(biāo)注每節(jié)(section)。最好確保注釋視覺突出，以便在內(nèi)容滾動、一目十行時(shí)快速定位，那么注釋你的css文檔對你或者其他人在以后的開發(fā)中都會有很大的幫助。大部分基礎(chǔ)的注釋會提示為什么這個規(guī)則會用在這里。

　　提示和注重

　　添加注釋可以幫助你或者以后的開發(fā)者避免出現(xiàn)不必要的混亂。保持這種習(xí)慣。看范例：

　　/* Turn off borders for linked images */
　　img { border: 0; }

　　時(shí)間和署名

　　一些設(shè)計(jì)師和開發(fā)人員喜歡在css文檔最近更新中標(biāo)明日子和時(shí)間，還有他們的名字和初始狀態(tài)。這些信息可以提供給你誰參與了這些，也提示了最近的文檔是怎樣的。

　　/* Sushimonster Typography Styles
　　Updated: Thu 10.18.07 @ 5:15 p.m.
　　Author: Jina Bolton
　　----------------------------------------------------*/

　　這是個很好的主意非凡是當(dāng)你工作在一個團(tuán)隊(duì)中，請記住，有些團(tuán)隊(duì)需要省去這種信息（一些公司寧愿在文檔里不出現(xiàn)這些名字和日期。）所以，最好就是看一下是不是需要這種信息。

　　組織分類

　　用注釋簡單說明css里的各個部分是個不錯的主意。例如，假如所有的標(biāo)題類型都放在一起了，你就需要注視來區(qū)分他們。

　　/* HEADER
　　----------------------------------------------------*/

　　我會稍后在討論“區(qū)分不同類型”的時(shí)候具體地說明這個。

　　注釋加標(biāo)

　　假如你的css文檔在組織零散樣式的時(shí)候跟我上面說的一樣，注釋加標(biāo)可以幫助你在你想要找到那部分文件的時(shí)候變得更簡單。你可以用特征符號、要害詞然后找到最終結(jié)果。

　　/* =HEADER
　　----------------------------------------------------*/

　　這在又長又復(fù)雜的樣式表中很有幫助。你可以在 Stop Design里讀到這個。.

　　參考

　　假如大家在制作樣式表的習(xí)慣上有所不同，用注釋作為參考向?qū)н�是很有用的。這個你在Steve Smith’s的css文件中，看到的就是包含一個規(guī)定色彩的參考標(biāo)準(zhǔn)。

　　/* COLORS
　　Body Background: #2F2C22
　　Main Text: #B3A576
　　Links: #9C6D25
　　Dark Brown Border: #222019
　　Green Headline: #958944
　　*/

　　你可以把這個參考放在你css文檔的最上面去幫助你記住什么顏色在你網(wǎng)站中用過。另外在這里你可以定義不同的部分，馬上找到他們（也可以用注釋加標(biāo)）這就是那個例子

　　/* GENERIC
　　HEADER
　　SIDEBAR
　　FORMS
　　TABLES
　　FOOTER
　　*/

　　/* =GENERIC
　　----------------------------------------------------*/

　　04.知道什么時(shí)候添加有條件的注釋和運(yùn)用技巧。

　　很多文章寫過一些關(guān)于問題解決的技巧，有條件的注釋是控制ie發(fā)布的一個好方法。然后文章又說了其他的一些方面。我同意有條件的注釋比在你的css文檔里亂丟垃圾要好得多，但是最近我開始慢慢意識到，很多證據(jù)表明，這并不是最好的解決辦法。

　　想象一下。你想在一個元素中設(shè)置它的最低高度，但是ie6瀏覽器卻不執(zhí)行它，所以你知道你能夠使用的高度，也同樣會被同樣的處理。重新建一個樣式表，然后把有條件的注釋加入到你的標(biāo)識中，你所有的需要都是要遵循這個規(guī)定？保持最低的高度和高度的規(guī)則在一起，選擇一個小技巧在同樣的css文檔里，這樣會更好嗎？在這種情況下，我覺得用這種方法很難奏效。

　　另外一件需要考慮的事情就是：假如你風(fēng)格的定位是多樣的，過多的css文檔和有條件的注釋會讓你的調(diào)試過程異常痛苦。所以，你需要改變一些事情（可能是上述表述中最低高度的值），你不得不打開不止一個文檔來做這個修改。在很多情況下，這對你來說可能不是件大事，但是想象，假如你定義了一些事情，在你主要的css文檔中，然后還要重新定義三個不同的ie樣式表。

　　假如你確定要用有條件的注釋，我推薦把注釋留一份在你主要的樣式表里，讓你或者下一位開發(fā)者知道這是ie非凡規(guī)則的存在。這種方法就是當(dāng)你不得不編輯一個高度或者別的東西的時(shí)候。你知道又會有不止一個文檔開著。

　　假如你確定要使用技巧，記得更新瀏覽器能夠改變接下來的工作，這次技巧的使用對于后面的版本控制也起不到作用。

　　05.組織選擇及聲明

　　要一直一直的保持你的css有規(guī)則，有組織性。最好把你的選擇符進(jìn)行歸類。

　　• reset styles
　　• typography styles
　　• layout styles (header, content, footer, etc.)
　　• module or widget styles
　　• etc.

　　然后，在每一個組里面，通過dom層組織選擇符。

　　• any parent styles (containing elements, working outside-in)
　　• block-level element styles (paragraphs, lists, etc.)
　　• inline element styles (links, abbreviations, etc.)
　　• etc.

　　其次在這里面，根據(jù)元素的類型工作：

　　• paragraphs
　　• blockquotes
　　• addresses
　　• lists
　　• forms
　　• tables
　　• etc.

　　最后，把css的聲明也按上述進(jìn)行歸類。

　　• positioning (with coordinates) styles
　　• float/clear styles
　　• display/visibility styles
　　• spacing (margin, padding, border) styles
　　• dimensions (width, height) styles
　　• typography-related (line-height, color, etc.) styles
　　• miscellaneous (list-style, cursors, etc.) styles

　　有些人喜歡按照字母順序來組織。這對我沒有任何用處，但是可能會對你有幫助。不管你選擇什么樣的方法，一定要堅(jiān)持下去。