如何做到css重構與改良

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

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

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

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

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

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

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

Yahoo!UILibrary:ResetCSS

Eric’sArchivedThoughts:ResetReloaded

現在，你已經準備好寫代碼了。我編寫的具有代表性的代碼就如下所示：

搭建你的頁面結構

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

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

程序代碼

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

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

當前文章：如何做到css重構與改良
文章URL：http://m.kartarina.com/news44/319394.html

成都網站建設公司_創新互聯，為您提供網站收錄、商城網站、網站設計公司、用戶體驗、微信小程序、全網營銷推廣

廣告

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