[CSS]7招變出高效能、好維護的CSS


一直以來對CSS的撰寫都有一種偏執狂的行為,總會標上自己的名字,弄好目錄,然後分門別類,目的是為了之後的維護可以更加便利,經過了一段時間之後,我開始發現這樣的寫法對於小型專案要求的快狠準有點不切實際,於是漸漸地我又出現了寫在行內的樣式,雖然知道這樣之後管理上非常不便利,但對於小型專案需要速戰速決,在微調與瀏覽器相容性的Hack,會比分離式管理還要快狠準,不過如果之後需要維護,那就無法獨立管理,會讓維護產生困難,所以現在只要有專案到了我的手上,我就會開始判斷這樣的網站是要快狠準、維護機率很低,還是說之後需要維護,必須完全獨立開來才可以讓日後的維護不至於太過辛苦。那到底要怎樣做才可以達到“高效能的CSS、維護性高的CSS、有組織的CSS、Hack簡便好維護的CSS”?萬事起頭難,先從最簡單的開始學,所以本篇就單單以自己純手工打造CSS檔的角度來看高效能、好維護的方式。

第一步就是不要在使用行內樣式與內嵌樣式,必須把樣式表獨立分支出來儲存成CSS檔案。所謂的行內樣式就是指直接撰寫在HTML tag標籤裡的CSS,如下:
<br style="clear:both"/>
至於內籤樣式就是寫在同一夜的</head>之上,如下: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>this is demo from Nowill</title>
<style type="text/css">
body{
color:#666666;}
</style>
</head>

那要怎樣把CSS獨立成CSS檔,然後引入到頁面?一般來說外部的CSS檔就是“檔名.css”,寫法與內嵌樣式差不多,但是不需要前後宣告style,至於引入文件的方式件事採用link的方式,另外一個@import css的方法,則在CSS2.1之後才有,所以一般來說對於CSS檔的引入還是會建議採用link比較可以相容舊版瀏覽器。

第二步減少重複定義,使用繼承概念讓CSS更有效率。CSS的繼承概念其實非常簡單易懂,這樣避免重復定義許多一樣的樣式,但是卻有可以在各別指定,跳出繼承樣式,所以不用擔心“如果全部指定了一個樣式之後如果有特例怎麼辦?”這樣的問題,一般常見的繼承樣式大概是像下面的例子:

 一般指定字體大小
p{ font-size:12px;}
div{ font-size:12px;}

如果全站都固定大小只需要指定body字體大小,其餘在body內的HTML tag都會繼承body字體大小樣式
body{font-size:12px;}

第三步加乘效應方便維護,一樣的東西一起宣告就可以了。這步驟看起來很模糊,其實很簡單,舉個例子:  h1,h2,h3,h4,h5,h6{color:#369;}
這樣做的好處是日後要維護你只要修改一個地方就好了,對於維護上會非常的方便。

第四步簡化CSS,輸入快速易上手。CSS除了繼承與加乘還有一個就是簡化,有許多的樣式其實都可以一行搞定,比方說margin與padding就是常見的例子:
p{
padding-top:5px;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;}

--------簡化後--------

p{padding:5px}

第五步除非不得已,否則不要隨便使用!important。使用!important可以在特定期況下將樣式權重提高,雖然在某些情況下是很好使用的方法,但是對於後續維護卻容易造成誤解,而且很容易發生在他處修改本地卻死也不動的情況,在這樣的情況下你就非常難去修改樣式,最後的結果就是會冒出一堆!important,但是其實卻不是真的這麼important!
p{
padding:10px !important; //難以維護
}
--------可採用下列方式--------
#content p{
padding:5px;
}

第六步加上容易看得懂得註解方式。在這裡提供我平常在使用的空白CSS檔案,這樣的內樣對於中小型網站來說應該很夠用,上頭有用註解方式書寫的目錄,並且分章節標示,在ID與Class的命名上務必語意化,不止要自己看的懂還要讓其他人看得懂,這樣的結構讓不管過了多久都可以快速進入狀況。但是對於大型網站來說把CSS拆開分成不同類型,就必須要有一分主要的CSS檔去記錄拆開分散出去的CSS檔名是對對應頁面哪個區域的,在這樣的情況下目錄書寫就會變得非常非常重要,有跡可循的結果就是方便日後維護或新增可以更快進入狀況。

第七步該死的瀏覽器相容性,到底該使用Hack或條件式註解?極度建議使用條件式註解會讓CSS讀取時更加便利。目前我都會將這些“特例”收集在同一份CSS檔中,另外作條件式註解匯入,所以當該瀏覽器不需要使用這些“特例”時,網友端下載網站的速度就會快那麼一點點,雖然只有一點點,但是在分秒必爭的網路世界,相信累積起來的時間是非常大的,當然也會有些人說如果直接寫在同一區塊日後維護會上比較快,但是對於那些用不到hack的瀏覽器勢必會讀取到許多額外資訊,對於出生日期更晚的瀏覽器來說無形中就變成了一種負擔,再來是日後如果要抽離某些特定版本,就不用在一行一行慢慢刪或者獨立拉出來,你只需要刪掉兩、三行左右的Code就可以辦到了。
<!--[if IE]>只有IE才看得到<![endif]-->
<!--[if IE 6]>只有IE6才看得到<![endif]-->
<!--[if lt IE 7]>只有比IE7舊才看得到<![endif]-->
<!--[if gte IE 8]>只有IE8以上才看得到<![endif]-->
<!--[if !IE]>不是IE才看得到<![endif]-->
<!--[if !(IE 6)]>除了IE6以外才能看<![endif]-->
<!--[if (gte IE 6)&(lt IE 8)]>Ie6以後到IE8才看得到<![endif]-->
<!--[if (IE 7)|(IE 6)]>只有IE7或IE6才看得到<![endif]-->

以上這些方式都是我這些年累積起來的心得感想,當然就如同我一開始說的,如果今天只是需要一小部份CSS並且需要快狠準,那的確是不需要用到全部的7招,但是對於一般網站製作的過程來說,這7招可以確實改善CSS混亂不得維護的情況。如果你還在剛學CSS,相信這篇文章對你的一定有幫助,對於那些CSS老手,也歡迎給予指正或分享屬於你的經驗,彼此交流才會更進步。
Share on Google Plus

About Nowill Chang

從踏入網路世界的第一天開始就不斷熱衷研究網站的各種事宜,目的是讓台灣人製作的網站也可以追上國際設計潮流。目前是品禾全端網路工作室實習掃地僧,企圖用最少的資源創造最新的網路公司營運模式。公司的理念是“開發更有價值的跨平台網站與網路應用程式”,Line帳號:nowill,歡迎閒聊泡茶喝咖啡。
    Blogger Comment

2 位過客留言,我也要留言:

  1. 這些技巧相當地實用!
    我也要回去看一下我的CSS檔,是否有再精進的空間。
    謝謝!

    回覆刪除