這篇文章介紹了提高編寫CSS代碼效率的10個(gè)習(xí)慣，西部e網(wǎng)看了覺得不錯(cuò)，大家可以學(xué)習(xí)一下。文章底部有原文鏈接。
1、保持一貫性。
就像其它的任何事一樣，值得一直保持一貫性。保持連貫性，而不是想到什么就給id和class命名什么。
CSS的級聯(lián)樣式有利于加深你的記憶，而且充分利用樣式的繼承去設(shè)置樣式表。
首先聲明通用的部分的樣式，然后繼續(xù)聲明不通用的。這樣當(dāng)你需要的時(shí)候更容易的去覆蓋一個(gè)特定的樣式。因?yàn)闃邮礁子陂喿x和更具邏輯性，你會發(fā)現(xiàn)編寫CSS更迅速。
使用一種最是適合你的方式。
復(fù)位和覆蓋
鏈接和類型
主要布局
二次布局結(jié)構(gòu)
表單元素
雜項(xiàng)
2、注釋標(biāo)題，日期和簽名
當(dāng)樣式被重寫的時(shí)候遇到問題，可以很方便的找到是原始樣式的編寫者。當(dāng)設(shè)計(jì)模板或者主題的時(shí)候這也是一個(gè)很好的習(xí)慣。
稍等…什么是swatch colors（色板顏色）？根據(jù)多年的經(jīng)驗(yàn)，我發(fā)現(xiàn)在樣式表中添加通用顏色的列表注釋，在開始編寫代碼和以后的維護(hù)代碼都是好非常有幫助的。
節(jié)省了你打開photoshop來取色的或者打開網(wǎng)站的風(fēng)格指南文檔的步驟。當(dāng)你需要指定的藍(lán)色，滾動到頂端的注釋找到相關(guān)顏色代碼復(fù)制即可。
3、整理出一套模板庫
一旦你決定使用一種結(jié)構(gòu)，刪除不是多余的部分留下主框架并且保存一個(gè)通用樣式模板以備以后使用。
同時(shí)你可以保存多種版本的模板已適應(yīng)不同結(jié)構(gòu)的網(wǎng)站。
如：2列布局、博客布局、等等…。Coda(蘋果系統(tǒng)下的編輯器)http://www.panic.com/coda/ 有很強(qiáng)的編輯功能，讓你的編寫代碼更加容易。其它的編輯器也有類試的功能，只要使用相同的批處理文件，就會工作很nicely。
如果每次都從頭，尤其每次以相同的習(xí)慣和方法寫一遍樣式，會讓人很抓狂。
4、使用有用的命名規(guī)則
尤其在我聲明一個(gè)列的id同時(shí)將它們命名為col-alpha和col-beta的地方注意一下。為什么不叫col-left和col-right?
時(shí)常需要想想將來的編輯。
明年你可以需要重新設(shè)計(jì)你的網(wǎng)站并移動左右邊欄。你不應(yīng)該因?yàn)閮H僅改變了位置而去重名你的html元素并重命名你的樣式id。
當(dāng)然，你只需要重新定義元素的左右列的位置并保持這id仍然為#col-left,但是就會產(chǎn)生讓人困惑的問題？如果是叫l(wèi)eft,不要指望它一直是實(shí)現(xiàn)居左的。這樣在移動元素以后，不會給你太多的空間的命名方式。
CSS的優(yōu)點(diǎn)之一就是讓內(nèi)容現(xiàn)實(shí)不同風(fēng)格能力。你重構(gòu)網(wǎng)站的時(shí)候，完全可以只是修改CSS而不去修改HTML。
因此，不要讓因?yàn)镃SS的名字而局限。通過使用更通用的命名約定并保持一致性。
給位置或者樣式以固定的命名方式。如命名一個(gè)叫.link-blue的class將會讓你麻煩不斷，當(dāng)客戶要求你講鏈接的藍(lán)色改成橘色的時(shí)候?qū)屇愕臉邮阶兊暮芰鑱y不堪。
因此命名的規(guī)則建立在他們是什么，而不是他們看起來像什么。例如，
通用方面：.comment-deta > .comment-blue
約束方面：.post-title > .post-largefont
.comment-deta更通用，.post-title約束更少。
5、使用連字符而不使用下劃線
有些比較老的瀏覽器對取得帶下劃線的CSS會出現(xiàn)問題，或就是不支持下劃線。
因此為了讓代碼擁有更好的向后兼容性，培養(yǎng)使用連字符成為一個(gè)習(xí)慣。使用#col-alpha 而別使用 #col_alpha。
6、避免重復(fù)定義
重復(fù)的屬性盡可能避免重復(fù)定義，而需要分組定義元素的屬性。如果您的h1和h2元素都是使用相同的字體大小、顏色、和邊框等，他們完全和可以合并成組定義。
同時(shí)盡可能使用樣式的簡寫方式。時(shí)常對一些相同定義的元素進(jìn)行合并和定義使用簡寫。
詳細(xì)寫法：
簡單寫法：
你了解CSS解釋中的順時(shí)針上、下、左、右簡寫方式，這是相當(dāng)重要。
另外，如果你的頂部和底部，或者左邊和右邊的屬性是相同的，你只需要兩個(gè)命名。
例子中意思是距離頂部和底部都是1em，距離左右都是0em。
7、優(yōu)化使樣式輕量化。
使用好上邊的提示，你才會真正的減少你的樣式表的大小。越小越容易加載，越小越容易維護(hù)及更新。
盡可能采用分組，刪除不需要的樣式。
另一種CSS常用簡寫：當(dāng)值為零的時(shí)候，你可以不指定度量單位。如果邊距設(shè)置為0，你不用定義成0px或者0em。無論測量單位是什么0都是0，同時(shí)CSS是可以識別的。
8、代碼基于火狐編寫，然后針對webkit內(nèi)核瀏覽器和IE瀏覽器進(jìn)行調(diào)整
首先解決CSS在火狐瀏覽器下的一些讓人頭疼的問題。如果CSS在火狐下都有問題，其它瀏覽器下更可能出現(xiàn)問題。
9、進(jìn)行驗(yàn)證
請使用W3C的CSS驗(yàn)證器進(jìn)行驗(yàn)證。如果你堅(jiān)持認(rèn)為你的布局沒有什么可以修改的時(shí)候，你可以使用CSS驗(yàn)證器對找出錯(cuò)誤會有很大幫助。
10、保持頁面的整潔性
支持單獨(dú)的瀏覽器使用單獨(dú)的CSS獨(dú)立的樣式表，同時(shí)javascript需要的樣式、服務(wù)器端需要的樣式、評論的樣式。這樣就可以避免一些不必要的ie的hack。只有這樣才會保證樣式的整潔性和可管理性。
原文：http://www.webdesignerdepot.com/2009/05/10-best-css-practices-to-improve-your-code/