前端工程師必看: 十大 CSS 技巧

css3

2014 年第一篇文章來寫前端工程師必須要瞭解的 [CSS] 技巧,此篇其實來自於 KidsIL Blog 內的一篇 10 Great CSS Tips for every Web Developer,裡面作者紀錄了十大 CSS 技巧,看完這十大後,發現有些技巧曾經出現在 Even Wu 給網頁設計師的建議一文,這些技巧都算是蠻基本的,對於前端工程師有很大的幫助,如果尚未瞭解或還沒開始使用的開發者,也可以建議團隊開始使用。底下內容來自於原網站,在加上筆者的一些補充。

用 firebug 或 console 來除錯

Firefox 還沒有推出 Developer Tools 時,大家一定是用 Firebug 來除錯,2006 年 Firebug 第一版 release 出來,讓 web 開發者可以更快速的瞭解網站除錯,也可以透過 Firebug 來瞭解網站的 performance。但是現今,Firefox 推出了自家 Developer Tools,而 Chrome 也是有很多好用的 Tool tips 及強大的 Workspace,對 Workspace 不熟悉的,可以參考之前我寫的一篇: Coding on workspace of Chrome Developer tools

Float or Inline-Block css

先來看看範例1,中間有三個 column,分別用 float: left 方式來排列

test
test
test

CSS 寫法:

.wrapper {
    width: 400px;
    min-height: 50px;
    background-color: red;
}

.column {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-left: 20px;
}

會發現背景紅色 .wrapper 區塊被砍了一半,原因就是沒使用 clear: both,正確解法請看範例2,如果不是用此解法,也可以將 float 取代成 display: inline-block,解法請看範例3。上述兩種解法是最常見的,終極解法可以透過 pseudo-class :after 來解決此問題,晚點會提到此解法

用 CSS animation 取代 Javascript

原文作者寫了一篇 CSS3 Transitions to replace JavaScript animations 文章,就是要告訴前端工程師盡可能將原本使用的 jQuery animation 取代成 CSS 作法,原因在於 CSS animation 的效能遠大於 JavaScript Native Language 效能,請參考 http://www.cssanimate.com/ 網站。

Form 表單請使用 Label input

上面的例子,只要點選 NameEmail 會發現瀏覽器游標自然會移動到 text input 欄位上,設定方式很簡單,只要將 labelfor attribute 設定為 input id 即可


Performance: Spiriting everything

每個網站一定會有很多小 icon 圖,不管是直接使用在 html 或者是寫在 CSS 內,在網路傳輸的時候,如果 10 張 icon 就會建立 10 條 connection,然而 css_spite 就是解決了此問題,將所有的小圖集結成一張大圖,透過 css 設定來減少網路連線數,網路上很多工具來達成此目的,像是 CSS Sprite Generator,如果熟悉 Compass 工具,可以直接使用 Spriting with Compass

.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save   { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }

.my-icons-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
.my-icons-new    { background-position: 0 -64px; }
.my-icons-save   { background-position: 0 -96px; }

不修改 image width & height attribute

這點其實蠻重要的,現在網站架構的瓶頸,說實在的 80% 以上都是在讀取圖檔,有時候 UI 設計師切出一張大圖,前端工程師拿去使用,結果圖檔很大,工程師就直接透過 css width height 修改圖片大小,這樣看起來是沒問題,但是網站就開始很慢,使用者開始不爽,網站自然就不會有人繼續用。正確方式就是將 image resize 成各種版本,可以直接參考這篇 Tools for image optimization

使用 max width and height 來調整 image 比例

這招其實還蠻好用的,我們先來看看例子

我們看到這張圖本來的比例大小為寬 228 高 320,但是經過底下 CSS 語法

img {
    width: 228px;
    height: 228px;
}

圖片就變成上述的例子,但是如果我們把 CSS 改成底下呢

img {
    max-width: 228px;
    max-height: 228px;
}

出來的結果就是

css3

善用 :before and :after

在前面有提到 float: left 後要加上一個 element clear: both 現在我們可以透過 :after 來解決這問題

.wrapper:after {
    content: ' ';
    clear:both;
    display:block;
}

減少 CSS 程式碼

這部份就是減少不必要的程式碼

.class {
    margin-top:5px;
    margin-right:10px;
    margin-bottom:15px;
    margin-left:20px;
}

可以寫成

.class {
    margin:5px 10px 15px 20px;
}

CSS color 部份 #RRGGBB 可以寫成 #RGB

SASS or Compass

團隊內尚未使用 SASSCompass 嗎?個人建議儘快導入這兩套工具,還不熟悉這兩套工具,建議將底下投影片看完