摘要：比如說預處理器，組件化，工程化，兼容性處理等方面，這些主要是基于自己的開發經驗業界流行技術方案進行準備。但是在開始談面試前我想先提出一個概念學霸面試模型學校的學習和公司的工作有很多相似的地方。所以對于面試，請參考上學那會兒你們班學霸的姿勢。

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

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

前端技術體系太多，不可能去熟練掌握每一項技術

人的精力有限，把時間花在當前(或可預見的未來)對你最有價值的事情上

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

出于對 CSS 技術的熱愛以及 Geek 精神

出于工作需要去研究學習以及 Coding

準備面試

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

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

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

以前入門時在圖書館借了很多 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

CSS Basic User Interface Module Level 3(CSS3 UI)

CSS Values and Units Module Level 3

CSS Backgrounds and Borders Module Level 3

CSS Image Values and Replaced Content Module Level 3

CSS Flexible Box Layout Module Level 1

CSS Grid Layout Module Level 1

CSS Custom Properties for Cascading Variables Module Level 1

其中 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 有一個體系化的認知下就去刷題（這跟學霸考前溫習和學渣考前突擊是一個道理），這樣即使能過也拿不到高分（面試高分 == 高薪，重點圈起來）。所以復習很重要，切忌裸考，事關工資，責任重大。

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

CSS 標準的制定過程是怎樣的？(對標準的理解)

CSS 層疊樣式優先級怎么計算？(考察層疊的順序以及 important 的影響)

CSS 有哪些選擇器？如何計算優先級？(基礎題，答錯死)

CSS 對元素屬性賦值的詳細過程？(指定值-計算值-應用值-實際值)

CSS 有哪些單位以及含義區別？(再結合 dpr 適配/響應式一起問)

CSS 盒模型的理解？(繼續拓展外邊距合并，塊級盒行內盒)

CSS 如何處理文檔流？(常規流，浮動，定位，BFC，IFC，GFC...理解這塊許多面試題迎刃而解)

CSS 可視化效果，如何處理裁剪和溢出？overflow 和 clip？display 和 visibility?

CSS 字體匹配策略？字體族？文字效果？

好了我先寫這么多吧

如何實現物理 1px 效果？

如何實現水平垂直居中？

常見布局方案？浮動布局？流式布局？彈性布局？Flex 布局？網格布局？

無線端響應式適配方案？

CSS 模塊化/組件化設計？

CSS 多邊框的實現方案？

如何實現 CSS 埋點統計？

CSS 硬件加速？性能優化方面？

CSS 預處理器和后處理器？autoprefixer？postCSS？

太多了一時半會兒想不全...

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

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

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