CSS樣式表建立美妙絕倫的網站

想成為一名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 p.m.
　　Author: Jina Bolton
　　----------------------------------------------------*/

　　這是個很好的主意特別是當你工作在一個團隊中，請記住，有些團隊需要省去這種資訊（一些公司寧願在文檔裡不出現這些名字和日期。）所以，最好就是看一下是不是需要這種資訊。

　　組織分類

　　用注釋簡單說明css裡的各個部分是個不錯的主意。例如，如果所有的標題類型都放在一起了，你就需要注視來區分他們。

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

　　我會稍後在討論“區分不同類型”的時候詳細地說明這個。

　　注釋加標

　　如果你的css文檔在組織零散樣式的時候跟我上面說的一樣，注釋加標可以協助你在你想要找到那部分檔案的時候變得更簡單。你可以用特徵符號、關鍵詞然後找到最終結果。
　　
　　/* =HEADER
　　----------------------------------------------------*/

　　這在又長又複雜的樣式表中很有協助。你可以在 Stop Design裡讀到這個。.



　　參考

　　如果大家在製作樣式表的習慣上有所不同，用注釋作為參考嚮導還是很有用的。這個你在Steve Smith’s的css檔案中，看到的就是包含一個規定色彩的參考標準。

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

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

　　/* GENERIC
　　HEADER
　　SIDEBAR
　　FORMS
　　TABLES
　　FOOTER
　　*/

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

　　04.知道什麼時候添加有條件的注釋和運用技巧。

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

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

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

　　如果你確定要用有條件的注釋，我推薦把注釋留一份在你主要的樣式表裡，讓你或者下一位開發人員知道這是ie特別規則的存在。這種方法就是當你不得不編輯一個高度或者別的東西的時候。你知道又會有不止一個文檔開著。

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

05.組織選擇及聲明

　　要一直一直的保持你的css有規則，有組織性。最好把你的選擇符進行歸類。

　　• 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.

　　其次在這裡面，根據元素的類型工作：

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

　　最後，把css的聲明也按上述進行歸類。

　　• 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

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

　　06.建立一個架構。

　　當你開始建立css樣式表的時候，如果你發現你總是不斷重複做同一件事情，那就考慮建一個庫或者架構結構吧。一個架構就像是網站骨架一樣，而且這回節省你建立網站的時間。你可能會在你的架構中發現以下比較典型的樣式表：

　　• screen.css - A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:
　　o reset.css - A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility.
　　o typography.css - A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.
　　o grid.css - A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up).
　　• print.css - A print CSS file would include your styles you want to be used when the page is printed.

　　構建架構其中一個範例就是，由0olav bjørkøy整理的架構藍圖（另外作者還包括傑夫豆和埃裡克邁耶）。另外一個很流行的架構就是雅虎的使用者介面庫。很多開發人員都感到這個預建立的架構套件含臃腫的標記和css，而且也包含著直接的類名稱。

　　注意：當我還在起草這篇文章的時候，Jeff Croft已經發布了怎能不愛上css架構的書。在書的注釋中他提到的，別人告訴他我強烈反對架構的存在，我不確定這種評論從哪裡來的，但是我要聲明，事實根本不是那樣子，相反我非常喜歡架構。為取得最佳效果，我還是建議你建立自己的架構結構，它能更好的為您或您的工作服務。

　　07.確保樣式表的可讀性和最佳化性之間的平衡。

　　風格格式化因人而異。有的開發人員首先建立能夠具有可讀性的樣式表風格，然後在文檔還沒有完全建好的同時就進行最佳化（去除評論，位，標籤，運輸效益等）。這是我想要推薦的一個好技術。然而，如果你不知道在什麼情況下去做這些事，就嘗試去找一種可以平衡樣式表可讀性跟最佳化性的一種風格。Steve Smith在這裡有一個很好的建議就可以提供這個技術。

　　此外，考慮到用連字號來代替底線。Microformats用連字號作為分隔標準，某些舊的瀏覽器不相容這種連字號。你可以在Underscores in class and ID Names.讀到更多關於這方面的知識。

　　08.掌握你的文字編輯器。

　　就像藝術家熟知他們的專業工具一樣，對於一個設計者或者開發人員去熟悉他們需要的工具也同樣重要。對於css，你再用的時候，你就是個編輯者。

　　這有很多文字編輯器可供挑選：TextMate, Coda, BB Edit, TextPad, DreamWeaver,我在這裡不是要告訴你要採用哪一種；他們各有利弊，一個好的編輯者會選擇適合自己的。然而，一旦你決定使用一種文字編輯器，就要去學習關於這個編輯器的所有知識。找到捷徑，然後學習所有的你能學到的技巧和竅門。

　　掌握好編輯器能夠快速提高你建立樣式表的時間，協助你更有效完成工作。

　　09.使用版本控制

　　順暢的可維護性也是建立精美樣式表很重要的一部分。這就是為什麼版本控制也會成為你的左臂右膀。這不僅對團隊很有協助，而且也是單獨設計師或者開發人員的救生員。

　　有些應用軟體是內建軟體，所以在資源方面就被控制了。DreamWeaver用的是一種check-in/check-out同步進行的系統（這可以協助一個開發人員在確定已經正確編輯中沒有編輯一個文檔）。這雖然很便利，但是在某些地方是被限制的。

　　Subversion (SVN) or Concurrent Versions System (CVS)是一個不錯的工具，他用來管理組件括添加選擇權，回複，察看修改（這對團隊很有協助---你可以查到誰添加，編輯，或修改了密碼，什麼時間做的）和解決衝突。Jonathan Snook寫了一片很好的文章叫“Hosted Subversion”，你可以通過閱讀這篇文章得到更多關於如何更快更簡單的建立樣式表的資訊。

　　10. 創造和保持一種風格規範.

　　在一些情況下，一種風格規範是一個作者關於文法規則和寫作的標準。他也可以用來作為設計，發展和內容的大綱標準。一種風格規範是一本可以很好地闡明排版，表格，色彩，圖片大小等的參考手冊。

　　當你建立了一種風格規範，它會在標記和css上起到有效作用。這種參考可以作為手冊用在發展團隊和將來的開發人員。它可以包括界定的布局，其中你可以列出不同的版面設計，並提供相關的標記和風格。


　　最後，你也為其他的開發人員留下了規範的步驟（比如如核對驗證和無障礙環境），來確保更高的品質。

　　結論

　　作為一個css大師，擁有先進的css技巧還是遠遠不夠的。（即：充分認識層疊，箱模式，瀏覽器如何工作）。我鼓勵你去思考一些你能夠不斷的持續不變的提高可維護性和功效的方法。想想超越怎樣設計文本，甚至這就是你一直需要提高的。要是你的樣式表即美觀又智能，掌握規整完美的工作流程是必不可少。