前端 CSS 面試大綱

背景

參加完廈門第四屆CSS Conf 後，讓我對 CSS 產生了新的思考。CSS 是前端必須熟練掌握並保持持續關注的技術，但是我又不想在 CSS 身上耗費太多精力，因為通常情況下都會有比寫 CSS 更要緊的活兒等我去做。這聽起來很矛盾，要想掌握好又不想花太多精力，人就是懶，不過這也正是我想要的。

所以我想以一種“高效而功利”的態度去學習 CSS，主要基於以下兩點：

前端技術體系太多，不可能去熟練掌握每一項技術
人的精力有限，把時間花在當前(或可預見的未來)對你最有價值的事情上

而對於 CSS 關注，我想大體分三類吧：

出於對 CSS 技術的熱愛以及 Geek 精神
出於工作需要去研究學習以及 Coding
準備面試

目前對於 CSS，我屬於後面兩類。本文的目的也就是：

讓你在工作中順手的使用 CSS，在跳槽的時候能寫上“熟練使用 CSS 且熟悉 W3C 標準”並順利應對面試。

下面我會結合自己的學習經驗以及面試經驗進行分析。

CSS 的學習

以前入門時在圖書館借了很多 CSS 書看，有些其實寫的一般，看了感覺有些浪費精力，所以這裡我嘗試提出一條短路徑：

如果你是前端小白，推薦先看看《Head First HTML與CSS(第2版)》，Head First 系列非常適合小白入門；
如果你前端入門了，推薦去看《CSS 權威指南(第3版)》，好好鞏固一下 CSS2.1 的知識；
如果你 CSS 基礎打好了，再去看看《精通CSS(第2版)》，雖然100%不能保證你真的能精通，但是會加深理解；
最後不管你現在處於什麼段位了，都去看看《CSS 揭祕》。

之後你可以選擇繼續看其他書，但我個人並不推薦花這個精力。因為學完上面幾本之後你對 CSS 已經有了一個系統的認知，其他書多少會有重疊的部分，收益不大，並且書上多數技術是過時的。更好的做法是關注一下業界知名部落格（如 w3cplus）和業內 CSS 方面專家，比如一絲大漠張鑫旭等，他們是活教材。另外訂閱一下 CSS Weekly 郵件推送，每週保持對最新技術的關注，訂閱源選一個就好，多了反而會分散你的精力，因為 CSS 方面技術只是大前端技術體系的一小部分。

當然做到這些還不夠，想要更全面的理解 CSS，還得去看 W3C CSS 相關的 specifications。但是 spec 太多，不可能全部看完，我們們的目的是熟練，不是精通，所以我們也只挑重要的，比如：

其中 CSS 2.1 的最重要，也有中文版的，其他的可以過一遍當做補充。這裡列出了大綱：https://www.w3.org/TR/CSS/ 可以挑自己感興趣的看，有的還是非常有意思的。如果你確實看不下去的話只啃 2.1 也可以，應付工作和麵試應該夠了（當年面阿里時特意把 2.1 看了一遍，只要面試官問 CSS 我就特開心）。我們們的目的是熟練，不是精通，當你對 CSS 有了一個系統化的認知後就只需要 keep an eye on 了，不用擔心落伍，因為你關注的大佬們肯定會發給你一手(或者最新二手)資料。

到了這一步理論知識已經 OK 了，如果你真的仔細看了上面 spec 可以說在 CSS 方面已經超越了大部分人甚至是面試官，趁機吹一波應該沒問題，但是在實踐部分我們也需要準備一下。比如說 CSS 前處理器，元件化，工程化，相容性處理等方面，這些主要是基於自己的開發經驗 + 業界流行技術方案進行準備。工作上主要靠 Google，面試時最好有相關案例，比如寫自己在某個專案中對 CSS 進行優化成功將 CSS 總體積精簡了60%之類的就很亮眼了。但是在開始談面試前我想先提出一個概念——學霸面試模型：

學校的學習和公司的工作有很多相似的地方。平時我們都在完成老師(公司)佈置的作業(需求)，實際上做作業（需求）的時候是可以線下谷歌百度交流學習的，但是考試（面試）是閉卷，除了少數課程敢裸考之外，一般還是需要考試（面試）前複習的。我想各位程式設計師如果現在直接再面試一次自己公司還不一定能過，不過這樣沒有意義，得給同學們充分的時間準備，即使是學霸期末也不敢裸考。並且你會發現學霸跟大神總是驚人的相似，平時上課（上班）積極動手積極思考，幫助其他同學答疑解惑，深得老師（老闆）喜歡，考試（跳槽）前最嗨的是他們，考完（入職）後分數最好（薪資最高）的往往還是他們。所以對於面試，請參考上學那會兒你們班學霸的姿勢。

當然這個概念的名字是我瞎取的。完成了以上工作如果面試官問到 CSS 相關的問題大概率會加分，但是切記要寫“熟練”，不要寫“精通”，你永遠不知道對面的面試官是什麼 CSS 段位。

CSS 考前準備

完成以上過程後你對 CSS 已經有了一個全面的知識體系了，剩下的就是劃重點刷題準備考試了。刷題的目的不是題本身，而是梳理知識脈絡，因為面試官不會單純的只問你固定的問題，所以切記不要在自己沒有對 CSS 有一個體系化的認知下就去刷題（這跟學霸考前溫習和學渣考前突擊是一個道理），這樣即使能過也拿不到高分（面試高分 == 高薪，重點圈起來）。所以複習很重要，切忌裸考，事關工資，責任重大。

而一旦你的知識體系化，你會發現押題非常輕鬆，只要按照 spec 來劃重點就可以了，我將其劃分為理論篇和實踐篇兩大類：

理論篇

實踐篇

如何實現物理 1px 效果？
如何實現水平垂直居中？
常見佈局方案？浮動佈局？流式佈局？彈性佈局？Flex 佈局？網格佈局？
無線端響應式適配方案？
CSS 模組化/元件化設計？
CSS 多邊框的實現方案？
如何實現 CSS 埋點統計？
CSS 硬體加速？效能優化方面？
CSS 前處理器和後處理器？autoprefixer？postCSS？
太多了一時半會兒想不全…

乍一看知識點非常多，但是100%不會全考，你要學會循序善誘。尤其是實踐篇，你要突出自己的重點並將面試官朝你擅長的方向引導。比如你寫在 CSS 元件化方面有研究，那一般面試官是不會想到去問你相容性相關問題的，若萬一面試官真問你怎麼相容 IE，我建議你放棄這家公司，來支付寶。

總結

這篇文章可能並不是那麼正能量，因為對於技術我們是需要有 Geek 精神的，但是本文卻違背了這一點，因為我覺得 Geek 精神是需要有一個方向的，除非你的方向就是 CSS 方面專家，否則精力上肯定跟不上，想想每天工作辣麼久，還得去看電影，去裝修，去找妹子，去帶娃，想想就覺得時間好像都被狗吃了。所以如果你真的願意花時間去看各種 spec，去關注 CSS 的進展，你其實被我騙了，這並不是一種“高效而功利”的態度，而是前端工程師應該有的態度。

哎，這套路我自己打99分，我其實並不是想騙大家去關注 CSS 的，我只是覺得，我們在工作之餘，還是得好好思考下前端工程師的精神和價值。

背景

CSS 的學習

CSS 考前準備

理論篇

實踐篇

總結

相關文章