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

檢驗(yàn)CSS書寫是否標(biāo)準(zhǔn)合理

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

樣式表索引

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

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

樣式表索引

命名錨點(diǎn)

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

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

命名錨點(diǎn)定義及查找#p#
 

避免多余Class定義

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

其實(shí)CSS的一個(gè)優(yōu)雅之處在于它的上下文選擇符（即子選擇器和相鄰?fù)x擇器），如下：

 
合適的命名

為class定義一個(gè)準(zhǔn)確清晰的類名十分關(guān)鍵，它有助于你更好更快的理解CSS定義，不至于混淆。 
 

縮寫

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

CSS縮寫會(huì)使CSS文檔更加干凈、簡(jiǎn)潔。下面是幾個(gè)例子：

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

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

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

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

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

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

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

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

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

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

 #p#

 CSS Hacks

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

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

CSS驗(yàn)證

當(dāng)你書寫完一個(gè)CSS文件，對(duì)它進(jìn)行驗(yàn)證是十分必要的。它可以確保書寫的CSS沒有錯(cuò)誤，并且在所有瀏覽器中正確的展示。

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

注：

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

【編輯推薦】

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