CSS文件可維護、可讀性提高指南四則

我們經常沒有特別注意CSS文件的可維護與可讀性的問題,當完成一項前端的工作之後,許多人都會忘記該項目的結構與細節。

然而代碼並不是馬上就能完全定型,在余下的時間裏還有不斷的維護工作,而這些工作也許不會是你自己完成。所以,結構優良的代碼能很大程度上優化它的可維護性。

下面列出四則技巧提高CSS文件可維護性的方法,以此作爲指南,以一種較好的CSS樣式組織習慣來進行WEB前端開發。

一、CSS樣式文件分解

對于小項目,在寫代碼之前,按頁面結構或頁面內容將代碼分爲幾塊並給予注釋。例如,可以分別將 全局樣式、布局、字體樣式、表單、評論和其他分爲幾個不同的塊來繼續工作。

而對于較大的工程,這樣顯然不會有什麽效果。此時,就需要將樣式分解到幾個不同的樣式表文件。下面的master stylesheet 就是這一方法的例子,它的工作主要是導入其他樣式文件。使用這一方法不僅能優化樣式結構,而且有利于減少一些不必要的服務器請求。而分解文件的方法就有許多種,master stylesheet 使用了最常見的一種。

Example Source Code

@import "reset.css";

@import "layout.css";

@import "colors.css";

@import "typography.css";

@import "flash.css";

同時對于大型項目,你也可以加上CSS文件的升級標志或者一些診斷等其他措施,這裏不再詳述。

二、爲CSS文件建立索引

爲了能夠迅速的了解整個CSS文件的結構,在文件開頭建立文件索引是一個不錯的選擇。

一種可行的方法是建立樹形的索引,結構上的id 和 class 都可以成爲該樹的一個分支。

Example Source Code

[Layout]

* body

+ Header / #header

+ Content / #content

- Left column / #leftcolumn

- Right column / #rightcolumn

- Sidebar / #sidebar

- RSS / #rss

- Search / #search

- Boxes / .box

- Sideblog / #sideblog

+ Footer / #footer

Navigation #navbar

Advertisements .ads

Content header h2

或者也可以這樣:

Example Source Code

[Contents]

1. Body

2. Header / #header

2.1. Navigation / #navbar

3. Content / #content

3.1. Left column / #leftcolumn

3.2. Right column / #rightcolumn

3.3. Sidebar / #sidebar

3.3.1. RSS / #rss

3.3.2. Search / #search

3.3.3. Boxes / .box

3.3.4. Sideblog / #sideblog

3.3.5. Advertisements / .ads

4. Footer / #footer

另一種方式可以只是先簡單的將內容列舉出來,也不需要縮進。下面的一個例子中,如果你需要跳至RSS部分你只需要簡單的搜索。

Example Source Code

[Contents]

1. Body

2. Header / #header

3. Navigation / #navbar

4. Content / #content

5. Left column / #leftcolumn

6. Right column / #rightcolumn

7. Sidebar / #sidebar

8. RSS / #rss

9. Search / #search

10. Boxes / .box

11. Sideblog / #sideblog

12. Advertisements / .ads

13. Footer / #footer

#rss { ... }

#rss img { ... }

定義這樣一個樣式檢索可以很有效的使其他人閱讀學習你的代碼變得容易。在制作大項目的時候,你也可以將檢索打印出來從而在你閱讀代碼的時候方便查閱。您還可以參考下面的文章。

三、格式化CSS屬性

當我們編寫代碼的時候,使用一些特殊的編碼風格會對提高CSS代碼的可讀性有很大幫助。許多人都有各自不同的編碼風格。一部分人習慣于將顔色和字體的代碼放在前面,另外一部分則更喜歡將類似浮動和定位的更“重要”的屬性放在前面。類似的,也可以將頁面元素按照它在布局中的結構進行排序:

Example Source Code

body,

h1, h2, h3,

p, ul, li,

form {

margin: 0;

padding: 0;

border: 0;

}

一些開發者用一種更爲有意思的方法:他們將屬性按首字母的順序排列。值得注意的是,這樣一種方法可能對某些浏覽器會産生問題。不管自己的格式如何,你要確保你已經清晰的定義了這些格式方法。這樣,你的同事在閱讀你的代碼的時候將會感謝你的努力。您還可以參考下面的文章。

四、合理的利用縮進

爲了讓你的代碼給人感覺更爲直觀,你可以使用一行來定義大綱元素的樣式。當指定的選擇器裏的屬性超過三個的時候,這種方式將帶來混亂。但是,適度的使用這種方式,你可以很清楚的區分相同類的不同點。

Example Source Code

#main-column { display: inline; float: left; width: 300px; }

#main-column h1 { margin-bottom: 20px; }

#main-column p { color: #333; }

同時,樣式修改的維護也是個比較麻煩的問題。很多人修改樣式之後就忘記了,結果後來又發現修改的樣式導致了頁面出錯,不得不苦苦尋找。因此,爲修改的樣式構建一個特殊的格式就很必要了。一種很簡單的方式是,給修改過的樣式縮進,同時,也可以使用一些注釋(比如"@new")來做一個標識。

Example Source Code

#sidebar ul li a {

display: block;

background-color: #ccc;

border-bottom: 1px solid #999;

margin: 3px 0 3px 0;

padding: 3px;

}

總的來說,只有建立一個合適的樣式指南才會對樣式表的可讀性有所幫助。記住,移去每一個對你理解文件沒有幫助的樣式指南,避免對過多的元素使用過多的樣式指南。然後,爲了一個可讀性可維護性良好的CSS文件而努力吧。

CSS:快速提升設計可讀性和維護性-css設計
設計漂亮的樣式表是一門藝術設計漂亮的樣式表不是一門暗黑藝術(如果用藝術家的眼光來看待這門藝術的話,那更多表現的是種對幸福的生活渴望和完美人生的追求. PS: 這是譯者找到的最靠譜的解釋.). 它需要持久的練習和全...查看完整版>>CSS:快速提升設計可讀性和維護性-css設計
 
如何提高文章的可讀性吸引更多的訪問者
  我們在做網站優化的時候,要考慮怎麽讓網站更加符合浏覽者的習慣,這樣我們的網站就會有更多的人來訪問,如果我們網站中文章的可讀性很差,那麽很可能失去浏覽者,所以我們應該從多方面入手,解決網站文章的可讀...查看完整版>>如何提高文章的可讀性吸引更多的訪問者
 
提高辦公效率 Word郵件合並技巧四則-MSOFFICE
  “郵件合並”是Word的一項高級功能,是辦公自動化人員應該掌握的基本技術之一。但是大多數書上對“郵件合並”的介紹都很簡單,如果按照書的上介紹去做,合並打印出的郵件並不能完全令人滿意。教你幾個郵件合並技...查看完整版>>提高辦公效率 Word郵件合並技巧四則-MSOFFICE
 
提高安全 了解無線加密WEP入侵-安全維護
無線網絡安全,WEP加密是一道重要的防線,無線加密WEP入侵手段是黑客侵蝕無線網絡的重要手段,他們常常是通過軟件的幫助做到這些破解網絡的目的,那麽這一系列文章將爲大家具體介紹,黑客是如何進行無線加密WEP入侵的...查看完整版>>提高安全 了解無線加密WEP入侵-安全維護
 
ADSL Modem維護和常見故障解決指南-組網技術
ADSL Modem還是比較常用的,于是我研究了一下ADSL Modem維護和常見故障解決指南,在這裏拿出來和大家分享一下,希望對大家有用。ADSL設備在使用的過程中,難免會出現這樣那樣的故障,通過對故障進行分析解決,我們不...查看完整版>>ADSL Modem維護和常見故障解決指南-組網技術
 
六招技巧提高路由器的安全性能-安全維護
路由器安全一直是我們關注的問題,于是我研究了一下如何徹底解決路由器安全,在這裏拿出來和大家分享一下,希望對大家有用。據卡內基梅隆大學的CERT/CC(計算機應急反應小組/控制中心)稱,80%的路由器安全突破事件是由...查看完整版>>六招技巧提高路由器的安全性能-安全維護
 
解決IE6不能正常解析CSS文件的方法及原因
網頁采用了 UTF-8 編碼格式,這本來沒有問題,問題是外部 CSS 文件默認是 ANSI 編碼,並沒有保存爲 UTF-8 格式。可能你會發現在一般情況下這樣也是沒有問題的,然而當 CSS 文件中包含有中文注釋時就可能不盡如人意了...查看完整版>>解決IE6不能正常解析CSS文件的方法及原因
 
asp.net 2.0 主題中多CSS文件引用
asp.net 2.0 中引入了很多新特性,"主題"應用就是其中之一.在方便多"主題"樣式切換的同時也存在一些小問題.常常一些網頁設計者們喜歡按"類別"或"功能模塊"把CSS劃分成幾部分,以方便日後修改.如: global.css,color.css...查看完整版>>asp.net 2.0 主題中多CSS文件引用
 
S8016路由交換機日常維護指南
附件 s8016路由交換機日常維護指南(用戶使用)-200310-c.pdf...查看完整版>>S8016路由交換機日常維護指南
 
 
回到王朝網路移動版首頁