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