| 導購 | 订阅 | 在线投稿
分享
 
 
 

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

2008-08-19 06:51:01  編輯來源:互聯網  简体版  手機版  移動版  評論  字體: ||

我們經常沒有特別注意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文件可維護性的方法,以此作爲指南,以一種較好的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文件而努力吧。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有