【轉載】給網頁設計師的建議

前陣子因為案件的需要，面試了約 20 位熟悉 CSS 的網頁設計師。為了提高面試效率，特地設計了一份 CSS 考題來進行篩選，考題雖命名為「煉獄CSS」但事實上非常初階，我認為都是一些必須知道的事情。
由於面試過程是一對一，所以不會有互相影響的狀況。面試者來信履歷都極有自信，幾乎都強調通曉 HTML/CSS 設計，經驗豐富，希望能盡力接下案件。但透過面試，發現有九成面試者不但無法答題，且錯誤答案竟然也雷同，讓我覺得一定要特地記錄下來。

首先來看看考題，總共十題，但多數人三題錯，就請回了。所以我只寫出這三題。考題在現場有實際的 HTML 頁面、面試者可以上機自由開啟 Inspector 或是上網 google。（也就是有上機啦…）

第一題、不同瀏覽器的預設樣式不同，要怎麼解決？

正確答案：reset.css 或是 normalize.css，如果有使用過 css framework 也多半是先行採用了這兩個重設 CSS 的方式。
原先設計這一題的用意是熱身，沒想到在這邊就攔下了九成的網頁設計師… 多數人回答不出預設樣式不同要怎麼辦，而是回答「針對不同的瀏覽器寫 css hack」有經驗的設計師就會知道，這是非常糟糕的答案。

第二題、如果一個X元素內的子元素通通 float: left 請問X元素本身會有什麼狀況？如果我要在X元素內下背景，卻沒有顯示，請問如何解決？

正確答案：X元素本身會沒有高度，必須實作 clear-fix (self-clear) 或是在內部塞任一新元素並設置 clear: both X元素才能包覆子元素
這一題也是很基礎的題目，如果回答不出來，可能連二欄式的版面都無法完成。但仍然有高達九成的人回答：「將X元素本身設置 height 就可以解決」這是一個恐怖的答案，很有可能在上線的時候就立刻破版。

第三題、為何 <a> 元素的寬度設置了 width: 150px 但是寬卻沒有 150px 呢？

正確答案：將 <a> 元素設定 display: block 或是 display: inline-block
我記得這一題也只有三個人答對，實在太令人驚訝了。這都是非常簡易的問題，絕非煉獄等級的考題。大部分的人要求 google 此問題。或是在 inspector 進行「試誤法」，某些人誤打誤撞找對了答案，但明顯不是真的知道解答。

---

雖然僅面試了 20 個網頁設計師，不代表全部的現況，但這些錯誤答案的普遍性，確實存在，令人不安。希望能夠寫出問題，整理後建議如下：

建立資訊流觀念

很多人認為網頁只是網路上的平面，但網頁不是一張在瀏覽器的畫布。網頁是一個排版系統，是資訊流。CSS 不只是制定位置、寬高，而是來制定排版規則。要注意「寬高」是不定的這件事，也是一個基本觀念。熟悉 HTML/CSS 排版的設計師，了解這點應該是基本功了。你看到的高不是高，而是讓內容多寡來決定外面的元素多高。

先打好基本功，再追求新規格

有不少面試者熟悉 CSS3 的新規格，幾乎都知道 border-radius、box-shadow… 等，卻無法分辨 block 與 inline 的差異，也不知道哪些元素預設就是 inline，有點像是小學沒念，直接跳級到高中的感覺。 這是因為網路範例的氾濫造成的，當你使用了別人的範例，基本功自然就不太需要，錦上添花即可，非常速成，再去找些刺激、裝飾性的 CSS3 … 但一個 <span> 元素該如何讓他有寬度，需要下 display: block 改變原本 inline 的類型，就考驗了你是否原本就知道 <span> 預設是 inline 的一員。這些知識僅需耐心的買一本 CSS 書籍，從頭讀起即可。

保持追根究柢的精神

我設計的這些問題，絕對是在進行每個案件都會遇到，而專業者應該是熟能生巧、腦筋就內建解決方式，不用進行查詢或試誤。來面試的設計師，也都做過不少作品，必定遇過這些問題，也曾解決過。但解決後沒有去理解為什麼，缺乏理解的後果就是：每次遇到問題都要重新查詢、對於新產生的問題也完全沒有頭緒。
所以當你遇到問題的時候，去問人、google 是很好的，但不要光拿著答案回來 copy / paste 上去，看到問題解決就算了，務必要保持「為什麼會發生、為什麼可以解決」的思考，去追問給你答案的人，或是仔細看看解題文章。事後多多實驗，重現問題，也能重新解決。

如果你追根究柢，其實也有可能因此多知道更多 CSS 的相關常識，甚至研究出比別人給你的還更好的解決方法。


出處：evenwu @ http://blog.evendesign.tw/post/38567423298/web-designer

[推到噗浪]