網(wǎng)站建設(shè)如何優(yōu)化CSS代碼
    現(xiàn)在也有很多準(zhǔn)則來(lái)幫助你在完成CSS布局后進(jìn)行CSS代碼的壓縮和優(yōu)化。CSS代碼優(yōu)化的目的并不僅僅是減少CSS文件的大小，它還能讓你的CSS代碼更有條理、更高效。
    這里介紹幾個(gè)方法，寫(xiě)出更優(yōu)化的CSS代碼。

    1.重置
    首先，很認(rèn)真的告訴你，總是要重置某些分類。無(wú)論你是使用 Eric Meyer Reset、YUI Reset 或者你自己編寫(xiě)的重置代碼，只要使用就對(duì)了。
    它能很簡(jiǎn)單的移除所有元素的填充（padding）和邊距（margin）：
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, 
pre, form, fieldset, table, th, td { margin: 0; padding: 0; } 

    Eric Meyer Reset和YUI Reset都是非常強(qiáng)大的，但是對(duì)于我而言，它們走的太遠(yuǎn)了。我覺(jué)得你最終需要重置一切，然后重新定義所有元素的屬性。這就是為什么Eric Meyer推薦更有效的使用（重置樣式表），而你不要只是使用他的重置樣式表，將它拖放到你的項(xiàng)目中。調(diào)整它（的重置樣式表），建立屬于自己的重置樣式表。
    請(qǐng)停止使用：
   * { margin: 0; padding: 0; }
    花更多的時(shí)間去制作它，當(dāng)你移除了填充（padding）你認(rèn)為單選按鈕會(huì)發(fā)生什么變化？表單元素有時(shí)能夠做些時(shí)髦的事情，所以最有效的方式就是將他們獨(dú)立。

    2.排序
    一個(gè)小的測(cè)試
    這個(gè)例子就是要讓你思考如何更快的找到右邊距屬性？

Example#1

div#header h1 { 
    z-index: 101; 
    color: #000; 
    position: relative; 
    line-height: 24px; 
    margin-right: 48px; 
    border-bottom: 1px solid #dedede; 
    font-size: 18px; 
}

Example#2

div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101;}
    你不能告訴我Example#2不能更快的找到右邊距屬性。根據(jù)字母排序你的元素屬性。一致的創(chuàng)建你的CSS，將幫助你節(jié)省花費(fèi)在尋找一個(gè)特殊屬性的時(shí)間。

    我知道一些人用這樣的方法去組織代碼，其他人又用另一種方法去組織，但是在我的公司，我們協(xié)商一致做出決定，所有的代碼都將按照字母排序來(lái)組織。通過(guò)這樣組織代碼與其他人協(xié)同工作一定是有幫助的。當(dāng)我碰到屬性沒(méi)有按照字母排序的層疊樣式表我每一次都會(huì)退縮。

    3.組織
    你應(yīng)該組織你的樣式表以致相關(guān)的內(nèi)容靠在一起，更簡(jiǎn)單的找到想要的。使用更有效的注解。舉個(gè)例子，這是我如何構(gòu)造我的層疊樣式表：

    /*****Reset*****/移除元素的填充（padding）和邊距（margin）。/*****Basic Elements*****/定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等./*****Generic Classes*****/定義簡(jiǎn)單的風(fēng)格，好像浮動(dòng)的某一側(cè), 移除元素的下邊距, 等當(dāng)然，它們大部分都與我們希望的語(yǔ)義不相關(guān),但是它們是高效處理代碼所必須的。/*****Basic Layout*****/定義基本的模板: header, footer等. 幫助定義網(wǎng)頁(yè)布局的基本元素/*****Header*****/定義所有Hearder元素/*****Content*****/定義所有內(nèi)容框內(nèi)的元素/*****Footer*****/定義所有Footer的元素/*****Etc*****/定義其他的選擇器。
    通過(guò)注解和歸類相似元素的分組，將更快的找到你想要的。

    4.一致性
    無(wú)論你決定使用什么方式去編寫(xiě)代碼，保持一致。我已經(jīng)對(duì)全部放在1行VS多行的CSS編寫(xiě)編寫(xiě)方式的爭(zhēng)論感到乏味和疲倦。這是不需要爭(zhēng)辯的。每個(gè)人都有自己的觀點(diǎn)，所以選擇一種你喜歡的工作方式，并在所有的樣式表中保持一致。

    就我個(gè)人而言，我將使用兩者結(jié)合的方式。如果一個(gè)選擇器超過(guò)了3個(gè)屬性，我將截?cái)嗨捎枚嘈械姆绞骄帉?xiě)。

div#header { float: left; width: 100%; } 
div#header div.column { 
    border-right: 1px solid #ccc; 
    float: rightright; 
    margin-right: 50px; 
    padding: 10px; 
    width: 300px; 
} 
div#header h1 { float: left; position: relative; width: 250px; } 

    7、讓CSS能保證日后的維護(hù)
    另一種優(yōu)化CSS代碼的方法是按照你的習(xí)慣將CSS生命分成清晰的結(jié)構(gòu)塊。將CSS文件的聲明用注釋分隔開(kāi)并進(jìn)行排版，可以更方便自己在很長(zhǎng)時(shí)間以后重新審理這個(gè)CSS文件，到那時(shí)你的效率會(huì)高出許多。
    如果你是一個(gè)設(shè)計(jì)團(tuán)隊(duì)中的一員，那么讓你的代碼保持規(guī)則的一致性并能與其他成語(yǔ)建立良好的溝通是相當(dāng)重要的，而且還要建立一種網(wǎng)站的標(biāo)準(zhǔn)。例如，團(tuán)隊(duì)中的某個(gè)成員想出了一個(gè)比較不錯(cuò)的網(wǎng)站標(biāo)簽切換界面，記錄下來(lái)這些想法和注解會(huì)幫助團(tuán)隊(duì)的其他成員再次使用這種效果，這樣能夠避免HTML或CSS代碼的臃腫。
    記錄工作主要包括標(biāo)記向?qū)?markup guides)和樣式表向?qū)?style sheet guides)，這種工作并不僅僅適用于團(tuán)隊(duì)，也同樣適用于一個(gè)人的設(shè)計(jì)工作(一個(gè)人的”團(tuán)隊(duì)”)。畢竟，在完整一個(gè)設(shè)計(jì)項(xiàng)目之后，經(jīng)過(guò)一年甚至更長(zhǎng)的時(shí)間，當(dāng)你再回來(lái)看到這些曾經(jīng)自己寫(xiě)的代碼時(shí)，也一樣會(huì)覺(jué)得很陌生。將來(lái)你會(huì)通過(guò)自己曾經(jīng)的記錄了解到在那些CSS結(jié)構(gòu)是如何讓網(wǎng)頁(yè)表現(xiàn)的，或那個(gè)網(wǎng)頁(yè)對(duì)表單按鈕的起到副作用。
    記住，一定要養(yǎng)成為CSS寫(xiě)注釋的習(xí)慣。