如何做到css重構(gòu)與改良

如何編寫具有良好結(jié)構(gòu)的CSS？如果在設(shè)計(jì)流程中缺乏"秩序"或"章法"是非常不利的，你得冒著風(fēng)險(xiǎn)去添加、更改、刪除CSS或其屬性，如此在你的最終成果中得到的將只有混亂的代碼和大量未使用的元素。所以我建議在你動(dòng)手編寫CSS代碼之前，先把你的網(wǎng)站的所有區(qū)塊都在草稿里畫出來(lái)，然后依照下面的簡(jiǎn)單規(guī)制優(yōu)化你的工作：

1.簡(jiǎn)潔扼要——切忌枝繁葉茂、東修西補(bǔ)
避免使用任何非必需的元素！兩個(gè)
層就可以達(dá)到目的那就不要用三個(gè)。如果你覺(jué)得得用很復(fù)雜的CSS才能完成一個(gè)特定的設(shè)計(jì)結(jié)構(gòu)，那你可能在某些地方犯了錯(cuò)誤，嘗試用其他的方式來(lái)實(shí)現(xiàn)它。通常情況下事情都是很簡(jiǎn)單的，復(fù)雜的是我們自己。

2.易于辨識(shí)——讓閱讀和管理都更容易一些
縮進(jìn)你的代碼以強(qiáng)調(diào)依賴關(guān)系的CSS元素，使用空白和注釋分割不同邏輯的代碼塊。使用如下所示的簡(jiǎn)潔的，行內(nèi)的注釋：

沒(méi)有什么理論強(qiáng)行規(guī)定或可以解釋一個(gè)ID為何要取名為#column-left，事實(shí)上此處取名為#column-left也有欠妥當(dāng)，用#content-side會(huì)更好些，如此就不必?fù)?dān)心因布局的變動(dòng)而產(chǎn)生歧義，比如把當(dāng)需要把#column-left列移到右邊時(shí)。

3.條理清晰——不斷的總結(jié)和改進(jìn)自己的編寫習(xí)慣
要習(xí)慣用同樣的名字標(biāo)識(shí)相同的區(qū)塊，如#logo、#navbar、#footer等。給不同類型的類分組并按字母循序排列CSS屬性可以提高代碼的可讀性。一旦你在設(shè)計(jì)中發(fā)現(xiàn)一些更好的方法或技巧，就應(yīng)該多多運(yùn)用以求鞏固進(jìn)而形成習(xí)慣。這樣代碼會(huì)變得越來(lái)越熟悉，越來(lái)越容易管理，而你也會(huì)寫得越來(lái)越快。

敲擊鍵盤之前先問(wèn)問(wèn)你自己：我要做什么？
在打開你最喜歡的編輯軟件之前你必須先想想這個(gè)好問(wèn)題，現(xiàn)在你只需要做的就是用鉛筆和橡皮在紙上畫出整個(gè)網(wǎng)站的主要區(qū)塊：

先重新設(shè)置CSS的瀏覽器默認(rèn)樣式
這個(gè)操作將重新設(shè)置HTML標(biāo)準(zhǔn)標(biāo)簽(h1,p,ul,li...)的瀏覽器默認(rèn)樣式。最近我讀了很多關(guān)于這個(gè)主題的有趣的帖子，在我的概念中一般需要重新設(shè)置的是：body,h1,h2,h3,p,ul,li,form...沒(méi)有其他的了。在任何情況下，你可以通過(guò)下面的兩篇文章了解完整的CSS重設(shè)技術(shù)：

Yahoo!UILibrary:ResetCSS

Eric’sArchivedThoughts:ResetReloaded

現(xiàn)在，你已經(jīng)準(zhǔn)備好寫代碼了。我編寫的具有代表性的代碼就如下所示：

搭建你的頁(yè)面結(jié)構(gòu)

OK，現(xiàn)在你可以開始設(shè)計(jì)網(wǎng)站的結(jié)構(gòu)了。如果網(wǎng)站的布局草稿已經(jīng)準(zhǔn)備好，那是可以很快就完成的。不管你選擇那一種布局類型，流式或固定寬度，我建議你定義一個(gè).container類，并讓它包含具有相同的寬度的CSS標(biāo)簽，在這種情況下，如果你想改變頁(yè)面的寬度，只需修改.container類的寬度就可以了，它所包含的元素的寬度會(huì)自動(dòng)適應(yīng)：

關(guān)于HTML代碼
一旦站點(diǎn)的主要區(qū)塊已經(jīng)用CSS定義完畢，你就可以開始編寫HTML代碼。那沒(méi)有什么復(fù)雜的，只需按正確的順序添加正確的DIV即可：

程序代碼

如果在瀏覽器上測(cè)試正常，你就可以逐步為各個(gè)區(qū)塊（navigation,sidebar,footer...）添加新的具體的CSS代碼，即按結(jié)構(gòu)的方式完成你的CSS并整合HTML代碼?？s進(jìn)所有依賴于同一個(gè)類的代碼：
當(dāng)你不得不在你的CSS代碼中尋找一個(gè)具體的標(biāo)簽時(shí)，這點(diǎn)小聰明將起到意想不到的效果。

自定義類放在最后
通常，如果有些類多個(gè)區(qū)塊都會(huì)用到，那我會(huì)以這樣的方式把它們添加到CSS文件的末尾：
以能很快認(rèn)出其主要屬性的語(yǔ)義名字來(lái)命名每個(gè)類。
希望這些小竅門能幫助你簡(jiǎn)化編寫和管理CSS代碼的方式。

當(dāng)前文章：如何做到css重構(gòu)與改良
文章URL：http://bm7419.com/news44/319394.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、商城網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)、微信小程序、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)