[心得] 給網頁設計師的建議

[evenwu (EvenWu)]

原文
http://blog.evendesign.tw/post/38567423298/web-designer

轉錄

前陣子因為案件的需要，面試了約 20 位熟悉 CSS 的網頁設計師。為了提高面試效率，

特地設計了一份 CSS 考題來進行篩選，考題雖命名為「煉獄CSS」但事實上非常初階，

我認為都是一些必須知道的事情。


由於面試過程是一對一，所以不會有互相影響的狀況。面試者來信履歷都極有自信，

幾乎都強調通曉 HTML/CSS 設計，經驗豐富，希望能盡力接下案件。但透過面試，

發現有九成面試者不但無法答題，且錯誤答案竟然也雷同，讓我覺得一定要特地記錄

下來。


首先來看看考題，總共十題，但多數人三題錯，就請回了。所以我只寫出這三題。

考題在現場有實際的 example 頁面、面試者可以自由開啟 Inspector 或是

上網 google。（也就是有上機啦...）

===

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

正確答案：reset.css 或是 normalize.css，如果有使用過 css framework

也多半是先行採用了這兩個重設 CSS 的方式。

原先設計這一題的用意是熱身，沒想到在這邊就攔下了九成的網頁設計師… 多數人回答

不出預設樣式不同要怎麼辦，而是回答「針對不同的瀏覽器寫 css hack」有經驗的

設計師就會知道，這是非常糟糕的答案。


第二題、如果一個X元素內的子元素通通 float: left 請問元素本身會有

什麼狀況？如果我要在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 的相關常識，甚至研究出比別人

給你的還更好的解決方法。



--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.34.100.58
推 LaPass:我也不會 QQ
→ LaPass:reset.css到底之前在板上看過，但沒用過
→ tyf99:你的第三題，說實在的，光題目我看不懂你要問什麼
抱歉啦，因為實際答題時是有上機的，光看敘述如果對相關名詞不是很懂
確實會看不懂

推 LaPass:是說..... 即使是現在，很多人都還在用table排版的.....
→ LaPass:尤其是已經寫了五年、八年的系統..... 這種現象還蠻嚴重的
→ LaPass:或是.... 用了一堆frameset來排版之類的
→ LaPass:這種寫法對SEO很不友善，但是我看到的那個ERP、EIR系統就這
→ LaPass:樣幹 orz.....
推 s25g5d4:ERP會需要SEO嗎
推 LaPass:不需要，所以..... 主管就繼續這樣用，即使對外網站也是這
→ LaPass:樣搞。看見搜尋引擎排的很後面，就想花錢去做排名....
封閉系統當然沒什麼SEO的問題，只是說架構不好，未來也很難維護或擴增

推 e1q3z9c7:我是初學者 大致上都看得懂欸＠＠
所以說你有基本功，但是看的懂跟突然被問，可能不太一樣

推 silver00:後面的建議 資訊類的工作都很受用
推 faerie0218: 我也覺得如果你開的這些題目不會，蠻誇張的...只是，
→ faerie0218:我的小建議是，題目要再清楚明瞭一點，我2.3題是看你的
→ faerie0218:說明才知道，你的問題是什麼XDD 目前身為前端工程師
→ faerie0218:的一點小建議，因為我是本來都做設計，其實我發現有時
→ faerie0218:程式跟設計人員在表達跟溝通模式還是差很多XDD
→ faerie0218:To LA大:不只TABLE，還有一種流派是用CSS樣式中的
→ faerie0218:dispaly:table-cell排版，之前幫人改到過，很想砸電腦
→ TonyQ:我是覺得這些題目不適合用紙本考，但面試透過引導應該是
→ TonyQ:不錯的考題。
回答以上大大的疑問，當場不是紙本考題阿！我上面有寫是上機阿 :)

推 EROS4:說這些不會的前端設計師該好好專精不要接超過本分的案子了
→ EROS4:inline跟block element是我在教學生html跟css最基本的基本
→ EROS4:基本弄不清楚只會一直重複寫一堆覆蓋樣式 不該把時間花在這
→ EROS4種事情上 SEO效果應該只是從中可以獲得的其中一個小效益而已

推 Ken52039:我必須說 當天不是考文字 是考實作 even大大會給你範例
→ Ken52039:然後問你為何會這樣 請問該如何解決
→ Ken52039:並非考考試卷好嗎 只是blog只能以文字呈現
→ Ken52039:even大大應該把考題分享出來讓板友嚐嚐 XDDDDD

推 nochingyo:很棒的分享!
→ nochingyo:elq3z9c7版友，你是初學者大致上都看得懂...
→ nochingyo:所以意思是你知道有那一些元素的預設是inline-block嗎囧

推 ToMobaby:我覺的這些東西要測一個人適不適合 很自high...
這邊是要找即戰力，不是適合的人啦... 供您參考

推 LaPass:<= 主要是後端，不過公司做起來沒人在管前端或後端的....
→ superpai:第三題 a元素的意思是<a>吧 這樣應該夠清楚不需要說明了
元素 = element 我想應該很清楚了？但其實上機的時候看的就是原始碼 :)
→ superpai:用dispaly:table-cell排版不是錯的 不太流行而已
若能回答這種當然也給對...

推 LaPass:而且老實說..... 我都在用公司的框架，真的會搞到完全不用
→ LaPass:html css就把版面排好。還有微軟的mvc也有可能會這樣....
你不是我要找的目標呀，我要的是 html/css 設計師
來的人也自稱是，才會有所要求的 :)

我平常也在用框架～確實都不用，但萬一遇到問題時就很考驗了
※ 編輯: evenwu          來自: 114.34.100.58        (12/24 00:18)
→ superpai:建議把X元素改成div元素XD 順著看下來會一時轉不過來
→ evenwu:幹嘛那麼在意看不懂考題啦，當場是上機啊XDDDD
→ evenwu:何況實際不是div...
→ superpai:就文章看下來一時以為a也像上題X一樣是不確定的代詞
→ superpai:小改一下就沒這個問題了..吧
→ Ken52039:主要真的是上機考 有考過就不會一直抓著文意打
→ evenwu:其實也有道理... 文章改一改好了
→ faerie0218:to superpai大:也不是說他是錯的，可能因為那時候，改
→ faerie0218:動的內容，必須有一些地方要動態呈現，所以我在寫JQ
→ faerie0218:加修改，就弄得很惱火，原來的人搞不定來兩天就離職XDD
→ faerie0218:to 原PO: 原來是上機，那我搞錯了 SORRY~XDDD
→ superpai:是外包 還是同事？
→ faerie0218:其實除了BLOCK也可以考考， margin跟padding，應該也是
→ faerie0218:不錯的題目XDD 上下兩個元素設了同MARGIN在某些情況下
→ faerie0218:只會吃到一個XDDD
→ faerie0218:to super大:以前應徵某公司，進去才知道我前一個只待2
→ faerie0218:天XDD  所以算是"前同事"吧...雖然沒共事過，但是我算
→ faerie0218:是幫他收尾XDD
→ superpai:oh 收尾就無解了...
→ faerie0218:哈哈~沒差啦，反正公司付我錢不就是要幫他處理XD?最後
→ faerie0218:我還是砍掉重練，重排了XDDD
推 sjlxup6:太好了這三題我會！！！
推 mrbigmouth:我也覺得問題本讓會讓人答錯....
→ mrbigmouth:第一二題的答案我都知道  也都在使用
→ mrbigmouth:但實際答我應該也會答錯
推 JYHuang:這三題用字面說不一定會，但是上機的話我八成都知道問題
→ JYHuang:在那.. but 我是寫後端+前端的 XD
→ mrbigmouth:通常看到第一題  會直覺想到那些令人痛苦的ie6 margin
→ mrbigmouth:等瀏覽器問題....
→ mrbigmouth:針對各瀏覽器用hack比用reset.css要難要複雜很多
→ mrbigmouth:有經驗的前端設計師應該都為此少掉一堆頭髮....所以自
→ mrbigmouth:然會直覺回答這得寫hack....
推 JYHuang:不過第一題從字面看的確會引導人去想到css hack
→ mrbigmouth:而reset css是很容易忽略的基本....雖然有用但會忽略
→ JYHuang:我在用reset.css主要是為了把瀏覽器預設的效果清掉
→ superpai:css hack是解bug而不是「預設樣式」 會直覺回答寫hack
→ superpai:的話觀念不夠清楚
→ mrbigmouth:第二題也是差不多道理  除了float會遇到這種狀況 在某
→ JYHuang:並不清楚各家會有不同的初始設定
→ mrbigmouth:些情況可能會用一個relative block內放全部absolute的
→ mrbigmouth:元素定位，這種情況要顯示relative block的背景就得設
→ mrbigmouth:hight
→ mrbigmouth:設hight可以同時解決float跟absolute父元素無背景的問
→ mrbigmouth:題，所以答題時自然會回答設height
→ mrbigmouth:雖然實際上用時...遇到float還是設clear....
推 JYHuang:會習慣加clear，主要是要避免文繞圖那種情形
推 mrbigmouth:對  "習慣"
→ mrbigmouth:遇到float下面加clear  網站建置一開始就reset css
→ mrbigmouth:這都是習慣   但不會去注意記憶  答題時很難想到拿出來
→ mrbigmouth:設height跟hack這種解法問題很大 但正因為問題大才會記
→ mrbigmouth:憶深
→ mrbigmouth:而且只要考慮到兼容ie6的問題  設height跟hack依然是不
→ mrbigmouth:可避免的解法之一  所以拿出來答題是很自然的
→ superpai:clear float ie6也支援啊 你在考慮什麼..?
→ superpai:如果沒有習慣加height是順位最後的答案被篩調也是剛好
推 LaPass:有機會我也想往前端深入說....
→ twsphere:第一題就刷下了 /  \ 還好我是寫後端的
推 aceone:原來這麼多人不會用reset...那寫起來不是超麻煩 囧
推 kaiyuegg:延伸 當 reset.css 遇到 jquery 套件的時候 怎麼處理?
→ musie:現在很多人都直接套bootstrap grid 取代reset norm css
→ musie:打錯Scaffolding
推 EROS4:reset.css比其它樣式都早下，碰到jquery套件會有啥問題囧
→ EROS4:clearfix用設height就可以解決的話根本就白考這題了..
→ oj113068:我也很驚訝這麼多人不會用reset，reset解決了90%相容問題
→ oj113068:其實也不是清掉預設，而是重置成統一的。
推 LaPass:樓上，在業界逛一圈會發現更多更奇妙的東西的.....
推 EROS4:剛剛客戶找的後端工程師把我寫在body底部的js都搬進head了
推 JYHuang:..樓上,就讓他De到起肖吧(壞心 XD
→ asamoon2008:不會用reset.css？不可能吧？都是只要IE能看就好嗎？
推 LaPass:不..... 是使用一般的寫法寫到各種瀏覽器都可以看.....
推 Isacat:推樓上用一般寫法 不過我想先加個reset.css算多一層保障啦
→ LaPass:當我看到，一個系統下有三四十個模組，每個模組下有二三十
→ LaPass:頁的JSP，每頁JSP可以多到一兩千，甚至五六千行的時候
→ LaPass:我都不知道該誇獎那些用笨方法搞出很龐大的系統，很努力
→ LaPass:                                             ^的人
→ LaPass:或是該指責，他不知道該用聰明的方法去寫程式.....
→ LaPass:這不管前後端都一樣.... = =
推 XD9527:求職者亂槍打鳥的情況嚴重+1
→ XD9527:但真的有一定標準的人 也不會在人力銀行裡出現太久的...
→ XD9527:            水準
→ XD9527:在人力銀行出現超過一段時間的 大都是被刷下來的...
推 kyork:to kaiyuegg 你應該是要問reset.css遇上WYSIWYG怎麼處理吧
推 kaiyuegg:有很多套件都會有些靠系統預設 可能原本沒reset前 沒問題
→ kaiyuegg:但是有些reset過後畫面很容易跑掉~例如日曆那些~!
→ kaiyuegg:主要是因為有些元素是用預設的 但是沒之後再定義過~
→ kaiyuegg:但是透過RESET就會重新定義了~就跟預設不同 很多套件都會
→ kaiyuegg:跑掉阿@@ 沒人遇過嗎? 樓上也有說 WYSIWYG 也會跑掉~!
→ kaiyuegg:上面的文法怪怪的XD 結論就是 Reset有些會改到系統預設值
→ kaiyuegg:但是很多套件沒有假設你的RESET情況 而是按照原本預設
→ kaiyuegg:所以很多JQUERY會跑掉~例如 float margin padding 之類的
→ kaiyuegg:             套件裡的CSS
推 EROS4:那你該學習用normalize.css 而且float不會是預設
→ EROS4:那種會跑掉的你不reset一樣會在別的瀏覽器跑掉
→ oj113068:遇過啊 網前搜尋FCK edit (菸)
→ oj113068:都會reset了，JQUERY跑掉這種事情 用開發者工具找一下原
→ oj113068:因就好了。我個人是覺得不用為此放棄reset...
推 kaiyuegg:我只是發延伸問題給大家而已~沒有說要放棄reset.css喔！
→ oj113068:欸 我不是那個意思XD
推 Ken52039:最基本的是要搞懂各種屬性在瀏覽器的預設 自己reset掉
→ TonyQ:我的意思是說這些題目不適合放給他自己一個人寫，
→ TonyQ:如果是透過問答的方式進行口試是很不錯的題目。XD
→ TonyQ:另外我看原文是知道不是紙本，只是我怕有笨蛋拿去做紙本考題
→ TonyQ:所以特別回那兩句而已，純用這個文字敘述很容易誤會題意的。
推 Luos:第一題那是什麼？
推 Luos:第二題確實clear是正確達案 不過我覺的inline-display 比較好
→ Luos:第三題就是inline-block了
推 fanntone:大部分公司都是拼產量的 品質先放旁邊~
→ fanntone:之其然而不知其所以然 反正套一套可以賣就好
推 kurtisgod:同意TonyQ 這三個題目方向性是對的 但換一種方式會比較
→ kurtisgod:清楚
推 FantasyRyu:鉅作
推 tomin:老實說我也看不太懂  看了答案才知道問題在問什麼
→ tomin:不過都是好問題  如果能搭配上機的樣貌應該會更好理解
推 monnayeurs:第2個問題，我看過書上寫overflow:auto;width:100%
→ monnayeurs:不知道有沒有人這樣用過？實際上用起來會不會有問題呢
→ superpai:全部的方法：http://mzl.la/10hb5hZ
→ monnayeurs:我再把問題說得明白一點，overflow:auto;width:100%;
→ monnayeurs:這種用法比較少見，是不是因為ＩＥ會出問題？
→ samuel1201:看不懂題目在幹嘛
→ samuel1201:但是我覺得你很厲害 哈哈
→ hermitwhite:第一題：我在本板看到前也不知道有那東西，我之前的解
→ hermitwhite:　法都是手動完整定義過相關CSS（原理差不多就是）。
→ monnayeurs:even大之前有一篇回覆文，內文有提過第二個問題，
→ monnayeurs:「請問css的 :after 到底是要怎麼用」這一篇。
→ monnayeurs:看過就明白第2題是什麼了。
→ superpai:overflow:auto很有可能出現捲軸所以會用hidden
→ superpai:至於width:100%，沒有作用。肯定是你記錯了
→ superpai:跟IE沒有關係
推 ibetuwahaha:推~~
推 monnayeurs:HTML&CSS網站設計建置優化之道，p.374
→ monnayeurs:標題是：浮動元素的父元素：解決方案。
→ monnayeurs:書上可能寫錯了，但是我可以證明不是我記錯了。
→ superpai:拍張圖來看看
推 LaPass:沒必要吧..... = =
推 aceone:http://www.quirksmode.org/css/clearing.html 有耶～
→ kurtisgod:第二題請google "clearfix"
→ aceone:可是這方法不太實用就是 XD
推 Clovershine:第二題目前我都使用overflow:hidden讓它自己去抓高度
→ Clovershine:光用clear: both並不能完全解決高度問題
→ monnayeurs:是不是像上面的連結中最後一個解決方案，而width設定px
→ superpai:原來width:100%是IE hack，後來都是推薦用height:1%或是
→ superpai:*zoom:1
→ superpai:所以overflow:auto;width:100%少見是因為後來有更好用的
→ superpai:版本 overflow:hidden; *zoom:1;
→ evenwu:大家都太在意題目了，當場考你有經驗絕對會答對，因為
→ evenwu:因為你會上機，而我都會在旁邊給提示...
→ evenwu:但這三題如果看不懂，也是基本功有問題。
→ evenwu:因為題目的用詞是標準化的，有很多人只會看程式碼
→ evenwu:那其實就會有溝通討論上的問題了
→ evenwu:然而我不知道大家在意題目這麼多，文章重點不在題目上 XD
推 aceone:看不懂文字版的敘述也是不太行 因為溝通能力也蠻重要的 XD
推 grassboy2:有做題目有推~還滿好玩的題目啊XDDD
推 GuCD:我只會一題...><
推 cadmus22:很有趣的問題, 真想看全部考題..轉職後也很少碰css了