分享
 
 
 

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

王朝html/css/js·作者佚名  2008-08-19
窄屏简体版  字體: |||超大  

我們經常沒有特別註意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文件而努力吧。

 
 
 
免責聲明:本文為網絡用戶發布,其觀點僅代表作者個人觀點,與本站無關,本站僅提供信息存儲服務。文中陳述內容未經本站證實,其真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
2023年上半年GDP全球前十五強
 百态   2023-10-24
美眾議院議長啟動對拜登的彈劾調查
 百态   2023-09-13
上海、濟南、武漢等多地出現不明墜落物
 探索   2023-09-06
印度或要將國名改為「巴拉特」
 百态   2023-09-06
男子為女友送行,買票不登機被捕
 百态   2023-08-20
手機地震預警功能怎麽開?
 干货   2023-08-06
女子4年賣2套房花700多萬做美容:不但沒變美臉,面部還出現變形
 百态   2023-08-04
住戶一樓被水淹 還衝來8頭豬
 百态   2023-07-31
女子體內爬出大量瓜子狀活蟲
 百态   2023-07-25
地球連續35年收到神秘規律性信號,網友:不要回答!
 探索   2023-07-21
全球鎵價格本周大漲27%
 探索   2023-07-09
錢都流向了那些不缺錢的人,苦都留給了能吃苦的人
 探索   2023-07-02
倩女手遊刀客魅者強控制(強混亂強眩暈強睡眠)和對應控制抗性的關系
 百态   2020-08-20
美國5月9日最新疫情:美國確診人數突破131萬
 百态   2020-05-09
荷蘭政府宣布將集體辭職
 干货   2020-04-30
倩女幽魂手遊師徒任務情義春秋猜成語答案逍遙觀:鵬程萬裏
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案神機營:射石飲羽
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案昆侖山:拔刀相助
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案天工閣:鬼斧神工
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案絲路古道:單槍匹馬
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:與虎謀皮
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:指鹿為馬
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案金陵:小鳥依人
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案金陵:千金買鄰
 干货   2019-11-12
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有