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