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

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

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

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

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

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

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

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

Yahoo!UILibrary:ResetCSS

Eric’sArchivedThoughts:ResetReloaded

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

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

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

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

程序代碼

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

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

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

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

廣告

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