CSS最佳化

千萬不要以為網站使用了CSS,就會變得比較有效率,如果CSS寫得亂七八糟,也還是會拖慢網頁速度的。每次看到那種把<div>當成表格用的人,就很想勸他,如果真的不會用CSS又不想學,就乾脆不要用<div>來強迫自己排版,因為你排得痛苦,瀏覽器跟我也很痛苦。

CSS需要事前一些對於版面與結構化程式碼的規劃、大量的思考跟檢驗每個需要結構化的小地方,更需要去考慮到跨瀏覽器的問題;用CSS的確可以讓網頁後續維護變得簡單快速,但是如果用得不好,反而是增加後面修改的麻煩。有的網站,隨便連結各式各樣的CSS,然後發現有問題又不知道錯在哪裡,要不就是後面再加上CSS補正、要不就是強制加在標籤當中,更離譜的我看見過,CSS的設定值跟瀏覽器顯示完全不一樣,瀏覽器顯示得是正確的,CSS卻是錯誤的,仔細一查,才發現原來是HTML也錯,所以兩個都錯就賽到變成對的。我的老天,這是什麼樣的狀況啊!?

在結構化與CSS都寫得正確以後,我們就要針對CSS來做最佳化的動作,以期讓網頁能夠達到最好也最迅速的呈現效果。

I. 不要引用不必要的CSS檔案
和JS一樣,瀏覽器都必須全部載入完畢以後才會繼續往下跑程式,因此多餘和沒有用處的CSS,瀏覽器一樣式照單全收的把CSS給讀進來,這樣一來,就造成了瀏覽器無謂的負擔。
II.移除不必要的空白
使用Dreamweaver,CSS的格式通常會長成下面這樣:

   body{ 
     color: #333333; 
     font-size: 12px; 
   }

但是你可以將它改變成下列這種寫法,一來不會讓畫面拖很長,簡潔的排版也可以讓你一下就可以找到想要的樣式或是標籤名稱:

  body{ color:#333333; font-size:12px;}

通常為了排版好看,我會在兩個屬性中間空一格,但是屬性冒號(:)後面不會空一格。你也可以完全不空格,檔案更大的時候,就會感覺出速度上的差異。

III. 善用樣式的堆疊減少重覆的CSS設定
樣式名稱是可以堆疊的,例如<p class=”smallFont colorRed keyWord”>,這裡面代表著三種不同的樣式,根據順序被讀取,也就是說,放在最後面的會覆蓋掉前面重複到的屬性設定,因此我們可以事先分析出到底有哪些樣式會重複被不同的標籤套用或使用,用樣式堆疊的方式會好過寫一堆的class,下面是簡單的例子:

  • <p class="smallFont colorRed keyWord"> –>小字體紅色關鍵字
  • <p class="largeFont colorRed"> –>大字體紅字
  • <a href="colorRed keyWord"> –>紅色關鍵字連結
IV.群組化的選取
如果一群標籤有著共同的部分屬性,就可以先群組選取起來做樣式設定,再分別做其他的小設定,這樣一來,就不會反覆的在那邊做同樣的設定。一般來講共同的設定我們會擺在前面,後面才會接著其他的小設定,因為後面的樣式設定可以覆蓋掉前面重複的樣式設定。
V.先使用簡單的選取器做一般性的設定
一開始可以先使用p、body等標籤,將一般性、廣泛的屬性設定好;通常是字體、字體顏色、大小等基本設定。
VI.善用子選擇器
不要看到一個樣式就弄一個樣式名稱,如果該標籤在DomTree有一個可供使用的Path,就不要設立多餘的classname,舉個例來說:


  <div class="left"> 
    <p><img src="../test.jpg" mce_src="../test.jpg" /></p> 
  </div> 
  

如果想要針對<img>標籤作設定,你不需要在<img>標籤當中另外增加class名稱,而可以使用:
.left p img{}

的選取器來對它做設定,當然,你要確定該頁當中所有的.left p img都是你所要設定的對象。

VII.多多利用繼承的特性
CSS裡面,樣式往往有繼承的特性,因此在設計上,我們會從大範圍的標籤慢慢的從上往下設定,這樣可以讓許多屬性自然繼承下去,減少撰寫重複的程式碼。
VIII.盡量使用簡單表示式
CSS裡面有一些簡單的表示式,例如padding和margin就可以有五種表示方式,分別用於不同的需求上,以下是四邊設定值都一樣的寫法:

  1. margin: 0; –>你也可以寫成0px,但是直接寫0比較簡單,也比較合理(註1)
  2. margin: 0px 0px 0px 0px; –>順序為上、右、下、左
  3. margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px;

如果你的設定值不同,除了上面的2跟3的寫法外,還有其他兩種:

  1. margin: 0 5px; –>上下、左右
  2. margin: 0px 10px 5px; –>上、左右、下

其他的屬性,其實也有類似的簡單表示式,例如下面的背景設定和字體設定:

** 背景設定

  body { 
    font-family: Arial, 'Nimbus Sans L' sans-serif; 
    font-size: 12px; 
    font-style: italic; 
    font-weight: bold; 
  }
  body { font: italic bold 12px Arial, 'Nimbus Sans L' sans-serif; }
** 字體設定

  body { 
    background-color: #CCFF00; 
    background-image: url(map.png); 
    background-position: left center; 
    background-repeat: repeat-x; 
  }
  body { background: #cf0 url(map.png) 0 50% repeat-x; }

最後就是邊框的設定,如果你四邊邊框的設定都相同,那麼就可以使用簡單表示是來讓語法更加簡潔俐落:


  body { 
    border-top-width: 1px; 
    border-top-style: solid; 
    border-top-color: #000000; 
    border-right-width: 1px; 
    border-right-style: solid; 
    border-right-color: #000000; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #000000; 
    border-left-width: 1px; 
    border-left-style: solid; 
    border-left-color: #000000; 
  }
  body { border: 1px solid #000; }

長度看來是不是差很多啊~如果能夠有效的減少程式碼,就可以減少檔案的大小,這對於傳輸效能上來講,是有相當大的助益的!

IX.使用色彩簡單表示式或是標準色彩名稱
也就是將原本#RRGGBB的表示是改以用#RGB來表示,不過這個方法的缺點就是只能選擇網頁16色,如果你有一些特殊的色彩需求,可能還是得乖乖的使用#RRGGBB這種網頁256色的色彩表示式囉!不過使用網頁標準的顏色,在效能上會比使用一些非網頁標準色來得好,但美感上可能就不見得符合每個人的需求了!
X.使用短的id或是class名稱
越短的名稱在判讀上的效率就會越高,所以不要設計一堆落落長的名稱讓瀏覽器,盡量簡潔而且可供辨識。(不要因為要短,就弄一堆a,aa,bb這種沒人看得懂的名稱)
XI.使用相對的長度計算方式
這個並不是要你全部使用百分比計算區塊大小,而是只針對必要、固定的區塊來設定固定的值,區塊內所包含的元件則盡量使用百分比或是其他的相對計算方式。這種做法也有一個好處,就是當要修改區塊大小時,只要更改外部的固定值,內部就會跟著變動
XII.移除註解
註解應該是留給自己及其他共同編輯人看的,上傳到網站上,就盡量把註解移除掉。你又不是要寫教學文件,幹嘛放一堆註解上去啊?
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s