原文：CSS Standards & Best Practices
譯者：FlyChina

CSS是用來(lái)定義網(wǎng)站的用戶(hù)界面或將顯示和內容區分開(kāi)來(lái)的。

由于CSS被廣泛地使用在幾乎所有網(wǎng)站上，所以讓我們花些時(shí)間來(lái)創(chuàng )建樣式表并確保它符合良好的標準。下面的技巧會(huì )極大地在開(kāi)發(fā)過(guò)程中幫助CSS初學(xué)者。

索引

本處的定義將幫助你和其他開(kāi)發(fā)者了解網(wǎng)站和CSS文件，還將幫助你們了解CSS文件中的內容。索引部分知識一個(gè)格式化了的CSS注釋段落。

• 給出CSS文件的作者信息
• 定義網(wǎng)站的設計（列數，靜態(tài)/動(dòng)態(tài)）[columns, static/liquid]
• 持續跟蹤文件版本（當文件有多個(gè)作者或未來(lái)需要有升級更新的時(shí)候非常有用）

錨點(diǎn)

錨點(diǎn)就好像在同一個(gè)CSS文件中的書(shū)簽一樣，錨點(diǎn)使你清晰地瀏覽整個(gè)CSS文件按并且使它很有組織。

錨點(diǎn)需要在CSS的索引（上面提到的）處定義，因為CSS沒(méi)有自己的錨點(diǎn)系統，所以我在文檔中使用了一個(gè)簡(jiǎn)單的技巧定義錨點(diǎn)。

方法是用一個(gè)比較罕見(jiàn)的字符來(lái)定義注釋?zhuān)斈阆胝夷硞€(gè)錨點(diǎn)時(shí)，你就可以從索引處復制并查找錨點(diǎn)的定義符，并找到該錨點(diǎn)。

重定義

重定義是用來(lái)覆蓋HTML默認的標簽樣式，把它們進(jìn)行重定義的方法。你是否見(jiàn)過(guò)這樣的CSS代碼，它只是想把那個(gè)特定的元素加上樣式！

CSS中一個(gè)非常美麗的用法是上下文選擇器，讓我們使用它：

命名規則

一個(gè)很關(guān)鍵的因素將元素給出精確無(wú)誤并且干凈有效的名字，這將避免混亂并讓你更容易快捷地讀懂你的CSS。

速寫(xiě)

CSS中的速寫(xiě)功能是你可以將許多同類(lèi)型的屬性合并成一個(gè)的屬性。

CSS速寫(xiě)使開(kāi)發(fā)過(guò)程更簡(jiǎn)單并且讓你的CSS文件干凈、簡(jiǎn)短、可讀，下面是幾個(gè)例子：

進(jìn)一步閱讀：

• CSS速寫(xiě)手冊
• CSS速寫(xiě)簡(jiǎn)介
• 有效利用CSS速寫(xiě)屬性

Sprites

（譯者注：翻譯成精靈好像并不能對文章加深感性認識，反倒在真正看到英文的時(shí)候不理解了，所以干脆不譯。）

將所有的背景圖片合并到一張并且使用背景定位來(lái)顯示不同的部分，這就是我們所說(shuō)的CSS Sprites。

CSS Sprites能夠減少HTTP請求的數量，節省帶寬，使得讀取更快。同時(shí)也可以避免圖像不穩定現象（比如當鼠標經(jīng)過(guò)一張圖片時(shí)可以顯示另一張圖片的效果，后一張圖片將在慢速的因特網(wǎng)連接中等待半天才會(huì )出現）。

CSS Sprites最佳并且最受歡迎的例子是蘋(píng)果公司網(wǎng)站上的菜單系統：

圖片來(lái)源：apple.com

進(jìn)一步閱讀：

• 詳解CSS Sprites的使用方法
• CSS Sprites：它們是什么，它們?yōu)槭裁磁１?，以及怎樣使用他?/span>
• CSS Sprites：使圖片切片滅亡之吻

明確化

選擇器明確化是當好幾個(gè)規則都可以被相同的元素使用時(shí)，優(yōu)先使用哪一個(gè)的過(guò)程。

簡(jiǎn)單說(shuō)來(lái)，每個(gè)CSS選擇器都有權重。選擇器的所有權重的總和決定了它在文檔中的屬性。當CSS文檔很大，以至于你不知道元素哪個(gè)權重較大時(shí)，明確化就能起到很大的幫助。

恩，明確化是CSS中一個(gè)較大的領(lǐng)域，以至于很難用幾句話(huà)解釋清楚，還是看例子吧：

進(jìn)一步閱讀：

• CSS明確化：你應當知道的幾件事
• CSS明確化

屬性重置

全局屬性重置確保一個(gè)網(wǎng)站在所有瀏覽器中顯示幾乎一樣。在每一個(gè)案例中，不同的瀏覽器給所有網(wǎng)站使用它們自己的默認樣式設置集，這將使我們的網(wǎng)站在不同的瀏覽器中顯示不一樣。全局屬性重置將改正這種情況并讓你從絕對一致的基礎開(kāi)始建立網(wǎng)站。

我并不總是推薦使用CSS框架，但是CSS重置你還是需要用到的?，F在有許多不同的重置方法，從簡(jiǎn)單的到復雜的。

進(jìn)一步閱讀：

• CSS框架和CSS重置：從零開(kāi)始學(xué)設計
• CSS工具：重置CSS
• 使用YUI重置CSS

Hacks

即便是一個(gè)完美的CSS，它也不能在所有瀏覽器中產(chǎn)生完全一致的顯示，每個(gè)瀏覽器有對CSS不同的解釋方法?？偠灾?，如果你需要你的網(wǎng)站在所有瀏覽器中保持一致，你不得不使用CSS Hacks。

使用CSS Hacks將減少CSS驗證時(shí)產(chǎn)生的錯誤，這一點(diǎn)我同意。要實(shí)現這點(diǎn)，一個(gè)可選的方法是每個(gè)瀏覽器使用單一不同的CSS文件并通過(guò)在HTML中包含判定瀏覽器的標簽來(lái)告訴瀏覽器應該使用哪個(gè)特定的CSS。我經(jīng)常在我所有的項目中創(chuàng )建一個(gè)"fuck-ie.css" :) （譯者注：此處作者用臟話(huà)表達了他對IE的憤怒。如果翻譯成“和IE交配.css”，世界會(huì )不會(huì )和諧一些？）

使用這種方法后，你的“主CSS文件”將通過(guò)驗證，與此同時(shí)，"fuck-ie.css" 文件也會(huì )通過(guò)驗證，但是只在IE瀏覽器中覆蓋“主CSS文件”。

進(jìn)一步閱讀：

• CSS hacks
• 特定瀏覽器的CSS Hacks簡(jiǎn)介

驗證

在創(chuàng )建CSS的時(shí)候就驗證它總是很必要的，浙江確保你的CSS沒(méi)有錯誤并且可以被所有瀏覽器正確地解釋。

W3C驗證器是一個(gè)非常流行的在線(xiàn)CSS驗證工具。

如果你有什么更多的技巧想加到本文中，請在文章評論中分享他們，我們希望這能幫到你。