前端工程師必看: 十大 CSS 技巧
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 方式來排列
<div class="wrapper">
<div class="column">test</div>
<div class="column">test</div>
<div class="column">test</div>
</div>
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
上面的例子，只要點選 Name 或 Email 會發現瀏覽器游標自然會移動到 text input 欄位上，設定方式很簡單，只要將 label 的 for attribute 設定為 input id 即可
<label for="username">Name:</label><input type="text" id="username" /> <label for="email">Email:</label><input type="text" id="email" />
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 and height attribute
這點其實蠻重要的，現在網站架構的瓶頸，說實在的 80% 以上都是在讀取圖檔，有時候 UI 設計師切出一張大圖，前端工程師拿去使用，結果圖檔很大，工程師就直接透過 css width height 修改圖片大小，這樣看起來是沒問題，但是網站就開始很慢，使用者開始不爽，網站自然就不會有人繼續用。正確方式就是將 image resize 成各種版本，可以直接參考這篇 Tools for image optimization
- Generate multi-resolution images: grunt-responsive-images
- Clowncar technique: grunt-clowncar
使用 max width and height 來調整 image 比例
這招其實還蠻好用的，我們先來看看例子
我們看到這張圖本來的比例大小為寬 228 高 320，但是經過底下 CSS 語法
img {
width: 228px;
height: 228px;
}
圖片就變成上述的例子，但是如果我們把 CSS 改成底下呢
img {
max-width: 228px;
max-height: 228px;
}
出來的結果就是
善用 :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
團隊內尚未使用 SASS 或 Compass 嗎？個人建議儘快導入這兩套工具，還不熟悉這兩套工具，建議將底下投影片看完
- 淺談 SASS ＆ Maintainable CSS
- Sass + Compass 101 Workshop
- Recreating Subtle Design Details Using Sass
Related View
- Sass language 和 Compass 教學投影片 (0)
- 在 Windows 底下安裝 Compass CSS Authoring Framework (1)
- 加速開發 CSS 工具: Sass (1)
- The streaming build system Gulp (0)
- CSS layout 好幫手 Compass scss version of normalize.css (0)
- 在 CentOS 上面安裝 Ruby 環境 (0)
- CSS 垂直置中解法 (4)
- Front End Engineer 前端設計師必備工具 Live.js (0)
- [CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript (8)
- 測試 Web Responsive Design Tool (0)