DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS技巧教程:讓CSS代碼更具有易維護性
CSS技巧教程:讓CSS代碼更具有易維護性
編輯:CSS詳解      日期:2016/12/30 17:14:36

如何讓你的CSS代碼更具有組織性和易維護性,為什麼你的樣式表總是臃腫和混亂的?有些時候是源於一開始書寫時的混亂和草率,有時候也是因為後期的維護和各種HACK的需要,但不管如何,書寫出干淨、易於管理的CSS很簡單,下面是10條改進的方法:
1.井井有條。
和許多其他的事情一樣,首先要保持一個良好的組織性,而不是想到ID就寫ID,想到CLASS就寫CLASS,而要使樣式表保持一個連貫的結構,這能讓你充分的利用樣式的繼承。首先定義你最常用的項目,然後是不太常用到的然後是其他,這會使你的CSS屬性得到正確的繼承,當你需要重新定義一個特殊的風格時會很簡單,也會使得你以後對該CSS的修改和編輯更加迅速,因為它遵從簡單、可讀、有邏輯的結構。
一個良好的CSS結構應該包括以下一些部分:

  1. 重置和覆蓋(Resets & overrides)
  2. 鏈接和字體(Links & type)
  3. 主要布局(Main layout)
  4. 次要布局結構
  5. 表單元素
  6. 雜項

下圖展示的就是一個示例:

2.風格名稱、創建時間、簽名。
讓別人知道是誰寫的樣式表,當他們有問題的時候可以及時的請教,這在制作模板或者主題以及團隊合作時非常有用。

DaimaRen.cn © 2009-2010 by TomIE Zhang
1
2
3
4
5
6
7
8
9
10
11
12
/*=========
Daimaren style
Copyright 2010  by TomIEweb@gmail.com
for  - www.daimaren.cn
 
swatch colors
-------------------
ff0000 - red
0000ff - blue
13437a - dark blue
e1e1e1 - light gray
===========*/

swatch colors裡記錄了此風格用到的一些顏色色值,和它們對應的顏色描述,這麼做是方便以後的編輯工作,你不用再打開PS或者其他取色軟件在去找顏色,翻到樣式頂部拷貝即可。

3.制作一個模板庫。
每次當你制作完一個樣式表時,你可以去除那些不通用的東西,然後把文件保存為一個CSS模板以備以後之用。
可以保存成多種用途的各個版本:兩列布局、博客布局、打印樣式、移動設備樣式等等。coda有一個很棒的剪輯功能,可以幫你很容易的保存模板。許多其他的編輯器也有類似的功能,即便是簡單的文本批處理也可以很好做出一個模板庫來。
每次都從頭重寫每一個代碼實在太瘋狂,特別是當你使用相同的公約和方法。

4.使用有用的命名約定。
你可能注意到在第一條建議裡的示例裡,定義了一對ID叫:col-alpha 和 col-beta,為什麼不直接叫col-left 和 col-right?想想我們未來要做的工作,
來年也許你要將左側的內容調整到右側,你不應該重新命名你的Html元素和重命名樣式表的id而只是為了移動一下位置。
是的,也許你說你可以把左側移到右側而不改動它的Html元素ID名,依然叫col-left ,但是這會是多麼混亂啊,ID描述的是左側,那就應該讓它始終待在左側,而不是背道而馳。
CSS的一個主要優勢就是表現與內容的分離,你完全可以不用動Html,而只是修改CSS去重新設計你的網站,所以不要使用有限制的命名,而更多的使用通用的命名約定並且要保持一致。
讓那些位置以及具體描述表現的詞語遠離你的CSS,類似.link-blue這樣的class命名只會給你今後帶來更多的工作,或者當你需要把藍色鏈接換成紅色的時候讓樣式表更加雜亂。
元素命名最好是基於它們是什麼,而不是它們看起來像什麼。比如:.comment-beta比.comment-blue更加通用,而.post-largefont比.post-title更加受限制。

5.連字符而不是下劃線。
老式的浏覽器解析CSS的下劃線容易出現問題,或者根本不支持。為了更好的向後兼容,使用連字符比下劃線要好。

6.不要重復你自己。
盡可能的利用分組聲明屬性,而不是每次重新聲明,如有H1\H2兩個元素都使用相同的font size color margins那就用逗號,把它們分在一個組內:
This:

盡可能的使用CSS縮寫,如有margin值如下:

DaimaRen.cn © 2009-2010 by TomIE Zhang
1
2
3
4
5
6
7
8
h1{
margin-top:1em;
margin-right:1em;
margin-bottom:2em;
margin-left:3em;
}
/*可以縮寫為*/
h1{margin:1em 1em 2em 3em}

7.優化輕型樣式表。
通過以上的建議,你已經大大減小了樣式表的大小,小就意味著更快速更容易保持和升級。
裁剪你不需要的盡可能的通過組來合並,謹慎使用整體的CSS框架,你會發現裡面有許多你用不到的東西。
另外一個讓CSS更小的建議是,你不用為0添加單位,如0px,直接寫0就好了。

8.先針對Gecko內核浏覽器寫基礎樣式,然後再在Webkit和IE內核的浏覽器上調整。

9.驗證。
如果你卡殼了,或者你的布局並不是你想要的效果,可以使用W3C’s free CSS validator驗證你的CSS,它將會給你指出你的CSS錯誤。

10.保持干淨的CSS作用域。
通過使用JS判斷客戶端判斷以及浏覽器注釋等方法,分離針對不同浏覽器的樣式到各自獨立的樣式表,使用這種方法可以避開骯髒的HACK出現在你的樣式表,保持干淨和更好的維護性。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved