提升撰寫HTML、DIV+CSS工作效率的六種方法

　提供一些這幾年來提升工作效率的一些方法讓大家參考。當然不希望只有後端工程師、前端設計師看得懂這些東西，所以有寫到一些專業術語或軟體的地方，我會寫下全名和關鍵字以便搜尋，希望讓平面設計師、美術設計師也能從中獲得一些東西，有問題可以再留言交流 J

一、整合出重複性質高、修改性質頻繁的CSS，建置專屬於自己的CSS檔案。

寫CSS的時候，一定有一些元素是你常常會寫到的，那為了增進工作效率，你應該要將那些時常會寫到的CSS檔案整理出來，並當做你下次開發時的範本，舉例：

第一次開發：將CSS都寫在一起。

.wrap {
 margin: 0 auto;
 width: 1003px;
}
.header {
 background: url(../images/header-bg.jpg) no-repeat;
 position: relative;
 height: 89px;
}
.logo {
 position: absolute;
 background: url(../images/logo.png) no-repeat;
 top: 26px;
 left: 72px;
 width: 335px;
 height: 51px;
 display: block;
 cursor: pointer;
}
.header_icon {
 position: absolute;
 top: 26px;
 left: 72px;
 width: 335px;
 height: 51px;
}

第二次開發：將每次會寫的css設定放至固定元素區，常變元素則依美術設計給個稿件來去做px與img附檔名調整，如此一來，你花時間寫CSS的時間便會大幅減少，每次設計CSS都可考量該如何把常用的元素放置固定元素中，進以提升工作效率。

/* 常變元素 */
.wrap {
 width: px;
}
.header {
 background: url(../images/header.jpg) no-repeat;
 height: px;
}
.logo {
 background: url(../images/logo.png) no-repeat;
 top: px;
 left: px;
 width: px;
 height: px;
}
.header_icon {
 top: px;
 left: px;
 width: px;
 height: px;
}
/* 固定元素 */
.wrap {
 margin:0 auto;
}
.header {
 position: relative;
}
.logo, .header_icon {
 position: absolute;
}
.header_icon {
 cursor: pointer;
}

二、不會有最完美DIV+CSS開發流程，但可以找出專屬於自己的加速工作流程的方法

1. 在alt+tab視窗的切換上，找出最上手的的切換方式。
2. 找出該如何快速找到該圖片的img高寬的方法。
3. 元素與元素間的距離px每次對不齊，是否哪些CSS觀念沒搞懂?
4. 每次在PS切版的時候，那1~2px一直切不齊，可找美術與同行一同討論PS切版細節。
5. 在每次開發過程中，如果老是遇到相同的CSS破版問題，那就有必要針對此點去解決，google是你的好朋友。
6. 每次做完一個HTML+CSS細節時，都必須按F5更新看一次畫面，可找出能自動瀏覽器更新的軟體，或先將CSS整體雛形寫好後，再用瀏覽器的擴充開發工具進行微調後，再將CODE貼回CSS檔案。(關鍵字：Firebug、Internet Explorer Developer)
7. 與美術溝通細節的時候，要記得請美術將一些常見的元素也提早建出來，以節省來回溝通的時間，例如除了首內頁設計給客戶看外，內頁HTML的H1、H2、P、按鈕、文字與觸發元素的點擊前、點擊後的顏色都設計出來。
8. 利用版本控制系統(SVN、Git)來避免前端設計師、後端工程師將檔案互相蓋來蓋去之問題。

三、多利用社群網站(Plurk、Facebook)，透過同行相互切磋、並吸取新的知識

1. 當你在寫CSS時，別人剛好在吸收新知並分享出來時，你就可節省不少爬文的時間。如果剛好他發的心得連結剛好是你正頭痛的問題，那就真的賺到了。
2. 有困難時，將問題拋出來後，也可以從同行間獲得啟發並解決問題。
3. 同行人脈必須自行去建立，要加對方好友前，建議先發信說明來意，方可獲得對方好感。
4. 從社群之各個專業人士分享裡，可充分體會到『人外有人；天外有天』的境地，所以學習是永無止境的。

四、沒有必要懂所有瀏覽器之 CSS BUG，只需找出最安全、最有效率的CSS排版方法即可

CSS排版方法因人而異，但不論你是TABLE排法、全span排法、div排法、inline-block、float等等，只要你的排法能夠讓大部分的瀏覽器都看不出有太大的差異，並且可以避免掉很多CSS BUG，那就已經很足夠了。

當在開發CSS Layout的時候，你自然就可從以前的經驗法則知道說，哪些排版容易出現瀏覽器的不兼容；這樣排版的話，IE系列會有問題等等之類的。

當然你可追求到更好，但不要太冀望你可以找到最完美且可以說服所有人的排版方式。

會有這樣的想法來自於下面的故事，有興趣的人可以去找找他的典故。

一位旅客搭乘輪船出海旅遊，在航行途中，有機會與經驗豐富的船長聊天，

這位旅客說：『船長先生 您常常行駛這條航線 想必對這裡的每一處暗礁＿急流都相當熟悉吧？』

但船長的回答卻十分耐人尋味：『其實 我對海中所有的暗礁並不是全都很清楚』

旅客對船長的回答感到很奇怪：『為什麼?假如您不知道哪裡有危險 怎麼能繼續航行呢？』

船長笑著說：『或許我無法知道所有暗礁的所在，但我知道正確的水道位置 這不就足以繼續往前航行了嗎？』

五、不要盲目追求尖端技術、css framework，需衡量自身能力是否已足夠，以及兼容性是否完善

1. 舉個簡單的例子，如果妳基礎不好，就跑去學很難又專精領域的東西，當你花了一兩年學會這個東西後，又有更新的東西跑出來。但因為自己CSS基礎不好，所以在學新的framework時，花的時間一定會比一開始就打好基礎的人還要久。
2. 任何軟體都只是工具，需衡量每個軟體融入自己的工作流程是否合適，同時間也可以去反省自己的工作流程是否需要進行大翻修。
3. 導入新技術時，需考量到它的兼容性是否良善。例如使用了HTML5+CSS3新技術，但結果客源都是IE系列；故沒辦法支援，在客戶立場上又很難交代。或者是用了很酷很炫的Jquery動畫特效，但結果智慧型手機不支援，要修改但又是別人寫的code也無從改起，且也不好意思請客戶換另一種UI交互動畫等等。
4. Css framework(例：Compass、Bootstrap)與高階CSS語言(SASS、SCSS、Less)為目前較為流行的CSS工具和語言，但以我個人覺得還不至於到非用不可的地步，我想最主要也是因為別人開發的東西當然也不可能百分百達到自己想要的需求與效率面。
   
   不過我還是鼓勵大家多去碰觸新技術，如果有發現到可以加速自己工作效率的其中一兩樣功能，那就真的賺到了。像我以前切圖出來，CSS都必須去設定圖片的寬高，但Compass會自己幫你計算出該背景圖案的寬高出來，會自動產生出類似height:98px;width:50px的語法出來，算是大大改善了我寫div+css的效率。
   
   除此之外，在css3的語法上還會自動幫你生語法出來也還不錯。但我也並沒有全部都利用compass在寫css，只有利用她的其中幾樣功能來加快我的效率而已。

六、利用自己順手的小工具來提升工作效率。

1. Zen Coding，這是我建議所有寫HTML的人是都需必備的插件之一。他可以加速你寫HTML的效率。舉例來說你要寫某個選單的UL底下有四個LI然後都有連結，只要打div.topmenu>ul>li*4>a後再按展開語法，就可以馬上show出你想要的架構，打法相當直覺有效率，熟悉以後，甚至一行就可將所有的Html tag雛形都設置完善。
2. FastStone Capture，裡面有個功能叫做擷取矩形區域，我都用他來量元素與元素間的距離。
3. Capture Color，吸色工具。