怎樣優(yōu)化CSS樣式表
在網(wǎng)站建設(shè)過程中，為了網(wǎng)頁設(shè)計(jì)簡(jiǎn)潔性，為了提升網(wǎng)頁打開速度和對(duì)搜索引擎的友好性，網(wǎng)站建設(shè)人員通常會(huì)為整個(gè)網(wǎng)站制作一個(gè)獨(dú)立于網(wǎng)頁的CSS樣式表，那么如何讓你的CSS代碼更具有組織性和易維護(hù)性，
1.井井有條。 和許多其他的事情一樣，首先要保持一個(gè)良好的組織性，而不是想到ID就寫ID,想到 CLASS就寫CLASS,而要使樣式表保持一個(gè)連貫的結(jié)構(gòu)，這能讓你充分的利用樣式的繼承。首先定義你最常用的項(xiàng)目，然后是不太常用到的然后是其他，這會(huì)使你的CSS屬性得到正確的繼承，當(dāng)你需要重新定義一個(gè)特殊的風(fēng)格時(shí)會(huì)很簡(jiǎn)單，也會(huì)使得你以后對(duì)該CSS的修改和編輯更加迅速，因?yàn)樗駨暮?jiǎn)單、可讀、有邏輯的結(jié)構(gòu)。 一個(gè)良好的CSS結(jié)構(gòu)應(yīng)該包括以下一些部分：
1. 重置和覆蓋（Resets & overrides）
2. 鏈接和字體（Links & type）
3. 主要布局（Main layout）
4. 次要布局結(jié)構(gòu)
2.風(fēng)格名稱、創(chuàng)建時(shí)間、簽名。
讓別人知道是誰寫的樣式表，當(dāng)他們有問題的時(shí)候可以及時(shí)的請(qǐng)教，這在制作模板或者主題以及團(tuán)隊(duì)合作時(shí)非常有用。
3.制作一個(gè)模板庫(kù)。 每次當(dāng)你制作完一個(gè)樣式表時(shí)，你可以去除那些不通用的東西，然后把文件保存為一個(gè)CSS模板以備以后之用?？梢员４娉啥喾N用途的各個(gè)版本：兩列布局、博客布局、打印樣式、移動(dòng)設(shè)備樣式等等。coda有一個(gè)很棒的剪輯功能，可以幫你很容易的保存模板。合肥網(wǎng)站建設(shè)公司許多其他的編輯器也有類似的功能，即便是簡(jiǎn)單的文本批處理也可以很好做出一個(gè)模板庫(kù)來 每次都從頭重寫每一個(gè)代碼實(shí)在太瘋狂，特別是當(dāng)你使用相同的公約和方法。
4.使用有用的命名約定。
你可能注意到在第一條建議里的示例里，定義了一對(duì)ID叫：col-alpha 和 col-beta,為什么不直接叫col-left 和 col-right?想想我們未來要做的工作,來年也許你要將左側(cè)的內(nèi)容調(diào)整到右側(cè)，你不應(yīng)該重新命名你的HTML元素和重命名樣式表的id而只是為了移動(dòng)一下位置。
是的，也許你說你可以把左側(cè)移到右側(cè)而不改動(dòng)它的HTML元素ID名，依然叫col-left ,但是這會(huì)是多么混亂啊，ID描述的是左側(cè)，那就應(yīng)該讓它始終待在左側(cè)，而不是背道而馳。
CSS的一個(gè)主要優(yōu)勢(shì)就是表現(xiàn)與內(nèi)容的分離，你完全可以不用動(dòng)HTML,而只是修改CSS去重新設(shè)計(jì)你的網(wǎng)站，所以不要使用有限制的命名，而更多的使用通用的命名約定并且要保持一致。讓那些位置以及具體描述表現(xiàn)的詞語遠(yuǎn)離你的CSS,類似。link-blue這樣的class命名只會(huì)給你今后帶來更多的工作 或者當(dāng)你需要把藍(lán)色鏈接換成紅色的時(shí)候讓樣式表更加雜亂。元素命名最好是基于它們是什么，而不是它們看起來像什么。比如：.comment-beta 比。comment-blue更加通用，而。post-largefont比。post-title更加受限制。