優(yōu)秀CSS代碼書(shū)寫(xiě)的10個(gè)規(guī)范

之前圖趣網(wǎng)曾經(jīng)分享過(guò)19UED前端CSS代碼規(guī)范，這里再次跟大家分享一個(gè)經(jīng)常用到提高css運(yùn)行效率的十個(gè)良好習(xí)慣。

1、保持一貫性。

就像其它的任何事一樣，值得一直保持一貫性。保持連貫性，而不是想到什么就給id和class命名什么。

CSS的級(jí)聯(lián)樣式有利于加深你的記憶，而且充分利用樣式的繼承去設(shè)置樣式表。

首先聲明通用的部分的樣式，然后繼續(xù)聲明不通用的。這樣當(dāng)你需要的時(shí)候更容易的去覆蓋一個(gè)特定的樣式。因?yàn)闃邮礁子陂喿x和更具邏輯性，你會(huì)發(fā)現(xiàn)編寫(xiě)CSS更迅速。

使用一種最是適合你的方式。
復(fù)位和覆蓋
鏈接和類(lèi)型
主要布局
二次布局結(jié)構(gòu)
表單元素
雜項(xiàng)

2、注釋標(biāo)題，日期和簽名

當(dāng)樣式被重寫(xiě)的時(shí)候遇到問(wèn)題，可以很方便的找到是原始樣式的編寫(xiě)者。當(dāng)設(shè)計(jì)模板或者主題的時(shí)候這也是一個(gè)很好的習(xí)慣。

稍等…什么是swatch colors（色板顏色）？根據(jù)多年的經(jīng)驗(yàn)，我發(fā)現(xiàn)在樣式表中添加通用顏色的列表注釋?zhuān)陂_(kāi)始編寫(xiě)代碼和以后的維護(hù)代碼都是好非常有幫助的。

節(jié)省了你打開(kāi)photoshop來(lái)取色的或者打開(kāi)網(wǎng)站的風(fēng)格指南文檔的步驟。當(dāng)你需要指定的藍(lán)色，滾動(dòng)到頂端的注釋找到相關(guān)顏色代碼復(fù)制即可。

3、整理出一套模板庫(kù)

一旦你決定使用一種結(jié)構(gòu)，刪除不是多余的部分留下主框架并且保存一個(gè)通用樣式模板以備以后使用。

同時(shí)你可以保存多種版本的模板已適應(yīng)不同結(jié)構(gòu)的網(wǎng)站。

如：2列布局、博客布局、等等…。Coda(蘋(píng)果系統(tǒng)下的編輯器)http://www.panic.com/coda/ 有很強(qiáng)的編輯功能，讓你的編寫(xiě)代碼更加容易。其它的編輯器也有類(lèi)試的功能，只要使用相同的批處理文件，就會(huì)工作很nicely。

如果每次都從頭，尤其每次以相同的習(xí)慣和方法寫(xiě)一遍樣式，會(huì)讓人很抓狂。

4、使用有用的命名規(guī)則

尤其在我聲明一個(gè)列的id同時(shí)將它們命名為col-alpha和col-beta的地方注意一下。為什么不叫col-left和col-right?

時(shí)常需要想想將來(lái)的編輯。

明年你可以需要重新設(shè)計(jì)你的網(wǎng)站并移動(dòng)左右邊欄。你不應(yīng)該因?yàn)閮H僅改變了位置而去重名你的html元素并重命名你的樣式id。

當(dāng)然，你只需要重新定義元素的左右列的位置并保持這id仍然為#col-left,但是就會(huì)產(chǎn)生讓人困惑的問(wèn)題？如果是叫l(wèi)eft,不要指望它一直是實(shí)現(xiàn)居左的。這樣在移動(dòng)元素以后，不會(huì)給你太多的空間的命名方式。

CSS的優(yōu)點(diǎn)之一就是讓內(nèi)容現(xiàn)實(shí)不同風(fēng)格能力。你重構(gòu)網(wǎng)站的時(shí)候，完全可以只是修改CSS而不去修改HTML。

因此，不要讓因?yàn)镃SS的名字而局限。通過(guò)使用更通用的命名約定并保持一致性。

給位置或者樣式以固定的命名方式。如命名一個(gè)叫.link-blue的class將會(huì)讓你麻煩不斷，當(dāng)客戶要求你講鏈接的藍(lán)色改成橘色的時(shí)候?qū)?huì)讓你的樣式變的很凌亂不堪。

因此命名的規(guī)則建立在他們是什么，而不是他們看起來(lái)像什么。例如，

通用方面：.comment-deta > .comment-blue
約束方面：.post-title > .post-largefont
.comment-deta更通用，.post-title約束更少。

5、使用連字符而不使用下劃線

有些比較老的瀏覽器對(duì)取得帶下劃線的CSS會(huì)出現(xiàn)問(wèn)題，或就是不支持下劃線。

因此為了讓代碼擁有更好的向后兼容性，培養(yǎng)使用連字符成為一個(gè)習(xí)慣。使用#col-alpha 而別使用 #col_alpha。

6、避免重復(fù)定義

重復(fù)的屬性盡可能避免重復(fù)定義，而需要分組定義元素的屬性。如果您的h1和h2元素都是使用相同的字體大小、顏色、和邊框等，他們完全和可以合并成組定義。

同時(shí)盡可能使用樣式的簡(jiǎn)寫(xiě)方式。時(shí)常對(duì)一些相同定義的元素進(jìn)行合并和定義使用簡(jiǎn)寫(xiě)。

詳細(xì)寫(xiě)法：

簡(jiǎn)單寫(xiě)法：

你了解CSS解釋中的順時(shí)針上、下、左、右簡(jiǎn)寫(xiě)方式，這是相當(dāng)重要。
另外，如果你的頂部和底部，或者左邊和右邊的屬性是相同的，你只需要兩個(gè)命名。
例子中意思是距離頂部和底部都是1em，距離左右都是0em。

7、優(yōu)化使樣式輕量化。

使用好上邊的提示，你才會(huì)真正的減少你的樣式表的大小。越小越容易加載，越小越容易維護(hù)及更新。
盡可能采用分組，刪除不需要的樣式。

另一種CSS常用簡(jiǎn)寫(xiě)：當(dāng)值為零的時(shí)候，你可以不指定度量單位。如果邊距設(shè)置為0，你不用定義成0px或者0em。無(wú)論測(cè)量單位是什么0都是0，同時(shí)CSS是可以識(shí)別的。

8、代碼基于火狐編寫(xiě)，然后針對(duì)webkit內(nèi)核瀏覽器和IE瀏覽器進(jìn)行調(diào)整

首先解決CSS在火狐瀏覽器下的一些讓人頭疼的問(wèn)題。如果CSS在火狐下都有問(wèn)題，其它瀏覽器下更可能出現(xiàn)問(wèn)題。

9、進(jìn)行驗(yàn)證

請(qǐng)使用W3C的CSS驗(yàn)證器進(jìn)行驗(yàn)證。如果你堅(jiān)持認(rèn)為你的布局沒(méi)有什么可以修改的時(shí)候，你可以使用CSS驗(yàn)證器對(duì)找出錯(cuò)誤會(huì)有很大幫助。

10、保持頁(yè)面的整潔性

支持單獨(dú)的瀏覽器使用單獨(dú)的CSS獨(dú)立的樣式表，同時(shí)javascript需要的樣式、服務(wù)器端需要的樣式、評(píng)論的樣式。這樣就可以避免一些不必要的ie的hack。只有這樣才會(huì)保證樣式的整潔性和可管理性。

原文：http://www.webdesignerdepot.com/2009/05/10-best-css-practices-to-improve-your-code/