你對如何檢驗CSS書寫是否標準合理是否熟悉，這里和大家分享一下，CSS用來定義網(wǎng)站的用戶界面，并實現(xiàn)頁面展現(xiàn)與內(nèi)容的分離。

檢驗CSS書寫是否標準合理

CSS用來定義網(wǎng)站的用戶界面，并實現(xiàn)頁面展現(xiàn)與內(nèi)容的分離。CSS在幾乎所有的網(wǎng)站都會用到，下面讓我們花些精力來確保你的CSS書寫的是否標準、合理。這些提示對CSS初學者同樣會有很大的幫助。

樣式表索引

樣式表頭部索引定義可以幫助你和其它人弄清楚該樣式表文件的相關信息，它一般是一段格式化的CSS注釋文本。

給出該css文件作者的相關信息
定義站點的布局（幾欄，靜態(tài)布局/動態(tài)布局）
記錄文件版本號（利于多作者協(xié)作及將來更新）  

樣式表索引

命名錨點

命名錨點是用來規(guī)劃整個CSS文件結(jié)構(gòu)的（就好像書簽一樣），從而使整個CSS文件獲得良好的組織。

命名錨點一般也是書寫在樣式表頭部的索引注釋中。CSS本身沒有內(nèi)部的錨點系統(tǒng)，所以我一般采用下面的小技巧來完成。在頭部索引拷貝你想找到的錨點，并在整個文檔中查找，從而獲取該CSS節(jié)。（描述的可能不清晰，看下面圖應該就明白了） 

命名錨點定義及查找#p#
 

避免多余Class定義

很多人（尤其是新手）在書寫CSS中會定義不必要的Class來樣式化一些元素。

其實CSS的一個優(yōu)雅之處在于它的上下文選擇符（即子選擇器和相鄰同胞選擇器），如下：

 
合適的命名

為class定義一個準確清晰的類名十分關鍵，它有助于你更好更快的理解CSS定義，不至于混淆。 
 

縮寫

在CSS中經(jīng)常會利用縮寫把多個相同類型的屬性定義指定為一個。

CSS縮寫會使CSS文檔更加干凈、簡潔。下面是幾個例子：

  #p#
CSS圖像拼合(即CSS Sprites技術(shù))

CSS Sprites技術(shù)：將用到的所有背景圖片合并為一張圖片，使用css背景屬性，來控制圖片的顯示位置和方式。

CSS Sprites技術(shù)的應用可以大大減少HTTP請求的次數(shù)，減輕服務器壓力，同時縮短了懸停加載圖片所需要的時間延遲，使效果更流暢，不會停頓。

蘋果官方網(wǎng)站的菜單設計是CSS Sprites技術(shù)應用非常好的案例： 
 

 
特殊性
 
即使在不太復雜的樣式表中，也可能有兩個或更多規(guī)則尋找同一元素，CSS通過選擇符特殊性來決定規(guī)則的次序。

簡而言之，每個CSS選擇符都會分配一個權(quán)重。將規(guī)則的每個選擇器的值加在一起，就可以計算出規(guī)則的特殊性。CSS特殊性的使用在大型CSS文件中會很有幫助。

CSS特殊性在CSS中是比較大的一塊內(nèi)容，很難用幾句話描述清楚，下面是幾個示例：

 
CSS Reset(CSS重置，偶個人叫它CSS初始化)

CSS Reset用于確保網(wǎng)站在不同瀏覽器中能夠獲得相同的展示效果。不同的瀏覽器有一套自己的初始默認設置，最終導致不同的UI展現(xiàn)。CSS重置就是用來解決這個問題，使你能在不同瀏覽器展現(xiàn)一致的基礎上構(gòu)建站點。

我們可能不會要求你一定去使用某個CSS框架，但是希望能書寫CSS Reset。我們可以在網(wǎng)上找到不少書寫好的CSS Reset樣例。
 

 #p#

 CSS Hacks

可以說再完美的CSS也無法在所有瀏覽器中獲得一致的展現(xiàn)，這是因為不同的瀏覽器給予你的CSS不同的解釋。如果想要網(wǎng)站在不同的瀏覽器顯示一致，你不得不使用CSS Hacks。
 
 

不過使用CSS Hack往往會導致CSS驗證出現(xiàn)錯誤，一個替代的解決方案是為不同的瀏覽器書寫不同的CSS，然后在html中使用條件語句引用它們。
 

CSS驗證

當你書寫完一個CSS文件，對它進行驗證是十分必要的。它可以確保書寫的CSS沒有錯誤，并且在所有瀏覽器中正確的展示。

W3C網(wǎng)站驗證是用來驗證CSS的常用工具。

注：

本文原文地址：http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices 
 

【編輯推薦】

1. 全面解析CSS優(yōu)先級規(guī)則
2. CSS Sprites樣式生成工具用法詳解
3. 專家推薦 10款優(yōu)秀CSS框架
4. CSS代碼整理及優(yōu)化七大原則
5. 深入剖析Firefox下 margin-top失效原因與解決方案