創建CSS樣式表的十個技巧

 　　如果你想成為一位CSS專家的話，光背出一堆選擇器是不夠的，還要能夠提高CSS樣式表的可讀性，開發效率以及維護性。這裡，Jina Bolton 將給我們分享一下她關於如何創建性感的CSS樣式表的十個技巧。

　　本文主要內容為：CSS代碼編碼規范，教你如何寫出整潔漂亮性感的css代碼，如何清晰的組織你的樣式表文件。閒言少敘，直接進入正題

　　1. 不要在HTML文件中使用CSS樣式定義

　　相信對於多數有一定工作經驗的設計師來說，使用外部樣式表來定義CSS樣式是小菜一碟的工作。但我在這裡仍然需要再次告訴你這點，因為我看到相當多的站點在最開始的時候，有著非常結構清晰，組織良好的代碼。但是隨著時間的推移，慢慢地內部定義乃至內聯樣式開始蔓延到站點的各個角落。也許是因為項目周期十分緊迫，抑或只是因為我們有點偷懶。

　　想象一下，當這樣的壞習慣被我們保持了下來，一段時間後，如果老板希望在不改動網頁內容的前提下重新設計網站的樣式的話，OH，你將不得不去查找這些自己丟在各個角落的垃圾代碼，如果項目碰巧規模又非常之大，那我恐怕只有祝你好運，或者推薦你去找黃健翔了。

　　千萬別給自己找這樣的麻煩，創建干淨的代碼，並始終讓他們保持干淨，這樣你會讓生活變得充滿快樂。

　　注意：請小心使用過多的外部樣式表，如果每次更改你都創建一個新的樣式表，這不會給你帶來任何好處。過多的樣式表會讓你將來的調試和更新工作變得更加復雜，當然我理解你希望將樣式分組管理的初衷，後面的內容中我會專門和你一起討論這個問題。

　　友情提醒：過多的樣式表應用，會帶來潛在的性能問題，並且在IE6下，最多只能引入32個外部樣式表。

　　2. “語義學Semantics”不僅僅是一個讓你迷惑的詞語

　　我要告訴你們，“語義學Semantics”將是你們最好的朋友。在你選擇最合適，語義最正確的元素來描述文檔內容之外，也請選擇語義清晰，合適的詞語來定義你的class名稱以及元素ID名稱。不僅僅是做正確的事，這樣做還能讓你和你的團隊成員的工作變得更加簡單。讓我們來看一條樣式定義：

　　.l13k { color: #369; }

　　我相信你乍看到這條定義，你能否知道它是用來干嘛的嗎?我想你肯定答不上來。這個名稱應該是某個只有作者本人知道的縮寫，即使作者現在知道含義，但一個月後，一年以後你還能知道它的含義嗎?讓我們再來看一條定義：

　　.left-blue { color: #369; }

　　這條定義，你可能立刻猜到它是用來干什麼的了，頁面左邊區域，文字顏色為藍色，表述的非常清楚明確。但是讓我們來假設一下，不久的將來，老板希望重新設計樣式，這個區域的內容位置將換到右邊，文字顏色將換成紅色。很顯然，這個名稱將變得不再合適，甚至變得不正確，現在你有兩個選擇，一是替換掉每個使用該class的地方，二是繼續使用這個讓人產生誤解的名稱。

　　這樣看來，名稱不是描述清晰就是好的，我建議你們最好是不要采用諸如顏色或者是高度寬度尺寸等非常具體的細節來命名樣式定義，同樣的也盡量避免使用具有具體形象的詞匯來命名(比如使用 box)，這樣的做法某種程度上破壞了我們希望將內容和樣式分離的初衷。怎樣做才是最好的呢，讓我們來看一下這個：

　　.product-description { color: #369; }

　　這個定義命名，無論你重構多少次，它都是非常合適的，美麗的東西永遠是美麗的。

　　3. 善用代碼注釋

　　善用代碼注釋將會給你和你的團隊成員帶來極大的便利，不僅僅是通常的注解，我們還能非常創造性的去使用注釋來幫助我們更好的完成工作。

　　* 提示和標注

　　代碼注釋最基本和最常見的用處就是用來提示和標注代碼，告訴別人這是用來干嘛的。

　　/* Turn off borders for linked images */

　　img { border: 0; }

　　* 時間戳和署名

　　和我們寫程序代碼一樣，是用注釋在文件頭部留下時間戳，版本號以及編輯者的署名，將更好的幫助我們追蹤記錄文件的歷史記錄。

　　/* Sushimonster Typography Styles

　　Updated: Thu 10.18.07 @ 5:15 p.m.

　　Author: Jina Bolton

　　—————————————————-*/

　　* 組織代碼

　　將樣式定義按照不同的組別來分組是一個非常好的主意，如果我希望將頁首的樣式定義放在一起，我會使用這樣的注釋來幫助我提高代碼可讀性：

　　/* HEADER

　　—————————————————-*/

　　* 注釋標幟

　　如果你采用了我上面提及的使用注釋來分隔不同分組的樣式定義代碼的方法的話，那使用注釋標幟將是一個非常有用的技巧來幫助你更好的查找代碼，迅速准確的定位到你想要的位置。我們可以使用一個特殊的符號(比如 [=])來作為注釋標幟

　　/* =HEADER

　　—————————————————-*/

　　非常酷的一個小技巧，這樣你不用上下拖動，就能迅速通過查找來定位到你想要編輯的位置了，查看更多關於注釋標幟。

　　* 參考索引

　　雖然不常用，但是也是非常有用的一個注釋使用方式就是作為代碼的參考索引，比如在文件頭部留下使用到的顏色代碼：

　　/* COLORS

　　Body Background: #2F2C22

　　Main Text: #B3A576

　　Links: #9C6D25

　　Dark Brown Border: #222019

　　Green Headline: #958944

　　*/

　　4. 明確什麼時候使用CSS Hack 什麼時候使用IE條件注釋

　　有很多關於使用CSS Hack帶來的問題，或是使用IE條件注釋來解決IE兼容性問題是更佳的方法的文章，以及兩者都不支持的文章。以前，我一直認為使用IE條件注釋解決這個問題要比CSS Hack來的合適，但是最近通過一些例證，我發現條件注釋也不是最合適的解決方案。

　　原因在於，使用條件注釋，必然需要維護同一樣式的不同IE版本的副本，這樣就帶來了工作量的增加，而使用CSS Hack則沒有這個問題，因此要具體問題具體分析。

　　但是不管采用哪種方法，請注意以下兩點：

　　a) 如果使用了條件注釋，請在主代碼文件中留下注釋，提醒自己以及其他設計師，如果修改了此處樣式，則需要同時更新其他所有IE版本的樣式定義。

　　b) 如果使用CSS Hack，也請留下注釋，標明這裡使用哪些Hack，對於什麼版本浏覽器生效，因為在可以預見的將來，隨著浏覽器版本的升級，這些Hack很有可能會失效。

　　5. 組織好你的選擇器以及屬性聲明

　　切記，切記，請將你的樣式表文件組織的結構清晰，我比較傾向於以下的代碼組織方式：

　　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

　　最後對於每一個樣式定義，我會將屬性聲明根據不同的類型分組：

　　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

　　很多人喜歡將屬性聲明按照字母排序，這個就是看個人喜好，但是我喜歡這樣的分組方式。

　　6. 創建CSS Framework

　　如果你發現你經常創建類似的樣式表的話，那你可以創建屬於自己的CSS Framework來積累大量的基礎樣式表，這樣在將來可以大大簡化你的工作。

　　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:

　　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. (我的重置樣式表 undohtml.css)

　　typography.css - A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.

　　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.

　　Blueprint framework 就是一個非常不錯的CSS Framework，大家