摘要：比如說(shuō)預(yù)處理器，組件化，工程化，兼容性處理等方面，這些主要是基于自己的開(kāi)發(fā)經(jīng)驗(yàn)業(yè)界流行技術(shù)方案進(jìn)行準(zhǔn)備。但是在開(kāi)始談面試前我想先提出一個(gè)概念學(xué)霸面試模型學(xué)校的學(xué)習(xí)和公司的工作有很多相似的地方。所以對(duì)于面試，請(qǐng)參考上學(xué)那會(huì)兒你們班學(xué)霸的姿勢(shì)。

參加完 廈門(mén)第四屆CSS Conf 后，讓我對(duì) CSS 產(chǎn)生了新的思考。CSS 是前端必須熟練掌握并保持持續(xù)關(guān)注的技術(shù)，但是我又不想在 CSS 身上耗費(fèi)太多精力，因?yàn)橥ǔＧ闆r下都會(huì)有比寫(xiě) CSS 更要緊的活兒等我去做。這聽(tīng)起來(lái)很矛盾，要想掌握好又不想花太多精力，人就是懶，不過(guò)這也正是我想要的。

所以我想以一種“高效而功利”的態(tài)度去學(xué)習(xí) CSS，主要基于以下兩點(diǎn)：

前端技術(shù)體系太多，不可能去熟練掌握每一項(xiàng)技術(shù)

人的精力有限，把時(shí)間花在當(dāng)前(或可預(yù)見(jiàn)的未來(lái))對(duì)你最有價(jià)值的事情上

而對(duì)于 CSS 關(guān)注，我想大體分三類(lèi)吧：

出于對(duì) CSS 技術(shù)的熱愛(ài)以及 Geek 精神

出于工作需要去研究學(xué)習(xí)以及 Coding

準(zhǔn)備面試

目前對(duì)于 CSS，我屬于后面兩類(lèi)。本文的目的也就是：

讓你在工作中順手的使用 CSS，在跳槽的時(shí)候能寫(xiě)上“熟練使用 CSS 且熟悉 W3C 標(biāo)準(zhǔn)”并順利應(yīng)對(duì)面試。

下面我會(huì)結(jié)合自己的學(xué)習(xí)經(jīng)驗(yàn)以及面試經(jīng)驗(yàn)進(jìn)行分析。

以前入門(mén)時(shí)在圖書(shū)館借了很多 CSS 書(shū)看，有些其實(shí)寫(xiě)的一般，看了感覺(jué)有些浪費(fèi)精力，所以這里我嘗試提出一條短路徑：

如果你是前端小白，推薦先看看《Head First HTML與CSS(第2版)》，Head First 系列非常適合小白入門(mén)；

如果你前端入門(mén)了，推薦去看《CSS 權(quán)威指南(第3版)》，好好鞏固一下 CSS2.1 的知識(shí)；

如果你 CSS 基礎(chǔ)打好了，再去看看《精通CSS(第2版)》，雖然100%不能保證你真的能精通，但是會(huì)加深理解；

最后不管你現(xiàn)在處于什么段位了，都去看看《CSS 揭秘》。

之后你可以選擇繼續(xù)看其他書(shū)，但我個(gè)人并不推薦花這個(gè)精力。因?yàn)閷W(xué)完上面幾本之后你對(duì) CSS 已經(jīng)有了一個(gè)系統(tǒng)的認(rèn)知，其他書(shū)多少會(huì)有重疊的部分，收益不大，并且書(shū)上多數(shù)技術(shù)是過(guò)時(shí)的。更好的做法是關(guān)注一下業(yè)界知名博客（如 w3cplus）和業(yè)內(nèi) CSS 方面專(zhuān)家，比如一絲大漠張?chǎng)涡竦龋麄兪腔罱滩?。另外訂閱一?CSS Weekly 郵件推送，每周保持對(duì)最新技術(shù)的關(guān)注，訂閱源選一個(gè)就好，多了反而會(huì)分散你的精力，因?yàn)?CSS 方面技術(shù)只是大前端技術(shù)體系的一小部分。

當(dāng)然做到這些還不夠，想要更全面的理解 CSS，還得去看 W3C CSS 相關(guān)的 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 的最重要，也有 中文版 的，其他的可以過(guò)一遍當(dāng)做補(bǔ)充。這里列出了大綱：https://www.w3.org/TR/CSS/ 可以挑自己感興趣的看，有的還是非常有意思的。如果你確實(shí)看不下去的話只啃 2.1 也可以，應(yīng)付工作和面試應(yīng)該夠了（當(dāng)年面阿里時(shí)特意把 2.1 看了一遍，只要面試官問(wèn) CSS 我就特開(kāi)心）。咱們的目的是熟練，不是精通，當(dāng)你對(duì) CSS 有了一個(gè)系統(tǒng)化的認(rèn)知后就只需要 keep an eye on 了，不用擔(dān)心落伍，因?yàn)槟汴P(guān)注的大佬們肯定會(huì)發(fā)給你一手(或者最新二手)資料。

到了這一步理論知識(shí)已經(jīng) OK 了，如果你真的仔細(xì)看了上面 spec 可以說(shuō)在 CSS 方面已經(jīng)超越了大部分人甚至是面試官，趁機(jī)吹一波應(yīng)該沒(méi)問(wèn)題，但是在實(shí)踐部分我們也需要準(zhǔn)備一下。比如說(shuō) CSS 預(yù)處理器，組件化，工程化，兼容性處理等方面，這些主要是基于自己的開(kāi)發(fā)經(jīng)驗(yàn) + 業(yè)界流行技術(shù)方案進(jìn)行準(zhǔn)備。工作上主要靠 Google，面試時(shí)最好有相關(guān)案例，比如寫(xiě)自己在某個(gè)項(xiàng)目中對(duì) CSS 進(jìn)行優(yōu)化成功將 CSS 總體積精簡(jiǎn)了60%之類(lèi)的就很亮眼了。但是在開(kāi)始談面試前我想先提出一個(gè)概念——學(xué)霸面試模型：

學(xué)校的學(xué)習(xí)和公司的工作有很多相似的地方。平時(shí)我們都在完成老師(公司)布置的作業(yè)(需求)，實(shí)際上做作業(yè)（需求）的時(shí)候是可以線下谷歌百度交流學(xué)習(xí)的，但是考試（面試）是閉卷，除了少數(shù)課程敢裸考之外，一般還是需要考試（面試）前復(fù)習(xí)的。我想各位程序員如果現(xiàn)在直接再面試一次自己公司還不一定能過(guò)，不過(guò)這樣沒(méi)有意義，得給同學(xué)們充分的時(shí)間準(zhǔn)備，即使是學(xué)霸期末也不敢裸考。并且你會(huì)發(fā)現(xiàn)學(xué)霸跟大神總是驚人的相似，平時(shí)上課（上班）積極動(dòng)手積極思考，幫助其他同學(xué)答疑解惑，深得老師（老板）喜歡，考試（跳槽）前最嗨的是他們，考完（入職）后分?jǐn)?shù)最好（薪資最高）的往往還是他們。所以對(duì)于面試，請(qǐng)參考上學(xué)那會(huì)兒你們班學(xué)霸的姿勢(shì)。

當(dāng)然這個(gè)概念的名字是我瞎取的。完成了以上工作如果面試官問(wèn)到 CSS 相關(guān)的問(wèn)題大概率會(huì)加分，但是切記要寫(xiě)“熟練”，不要寫(xiě)“精通”，你永遠(yuǎn)不知道對(duì)面的面試官是什么 CSS 段位。

完成以上過(guò)程后你對(duì) CSS 已經(jīng)有了一個(gè)全面的知識(shí)體系了，剩下的就是劃重點(diǎn)刷題準(zhǔn)備考試了。刷題的目的不是題本身，而是梳理知識(shí)脈絡(luò)，因?yàn)槊嬖嚬俨粫?huì)單純的只問(wèn)你固定的問(wèn)題，所以切記不要在自己沒(méi)有對(duì) CSS 有一個(gè)體系化的認(rèn)知下就去刷題（這跟學(xué)霸考前溫習(xí)和學(xué)渣考前突擊是一個(gè)道理），這樣即使能過(guò)也拿不到高分（面試高分 == 高薪，重點(diǎn)圈起來(lái)）。所以復(fù)習(xí)很重要，切忌裸考，事關(guān)工資，責(zé)任重大。

而一旦你的知識(shí)體系化，你會(huì)發(fā)現(xiàn)押題非常輕松，只要按照 spec 來(lái)劃重點(diǎn)就可以了，我將其劃分為理論篇和實(shí)踐篇兩大類(lèi)：

CSS 標(biāo)準(zhǔn)的制定過(guò)程是怎樣的？(對(duì)標(biāo)準(zhǔn)的理解)

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

CSS 有哪些選擇器？如何計(jì)算優(yōu)先級(jí)？(基礎(chǔ)題，答錯(cuò)死)

CSS 對(duì)元素屬性賦值的詳細(xì)過(guò)程？(指定值-計(jì)算值-應(yīng)用值-實(shí)際值)

CSS 有哪些單位以及含義區(qū)別？(再結(jié)合 dpr 適配/響應(yīng)式一起問(wèn))

CSS 盒模型的理解？(繼續(xù)拓展外邊距合并，塊級(jí)盒行內(nèi)盒)

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

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

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

好了我先寫(xiě)這么多吧

如何實(shí)現(xiàn)物理 1px 效果？

如何實(shí)現(xiàn)水平垂直居中？

常見(jiàn)布局方案？浮動(dòng)布局？流式布局？彈性布局？Flex 布局？網(wǎng)格布局？

無(wú)線端響應(yīng)式適配方案？

CSS 模塊化/組件化設(shè)計(jì)？

CSS 多邊框的實(shí)現(xiàn)方案？

如何實(shí)現(xiàn) CSS 埋點(diǎn)統(tǒng)計(jì)？

CSS 硬件加速？性能優(yōu)化方面？

CSS 預(yù)處理器和后處理器？autoprefixer？postCSS？

太多了一時(shí)半會(huì)兒想不全...

乍一看知識(shí)點(diǎn)非常多，但是100%不會(huì)全考，你要學(xué)會(huì)循序善誘。尤其是實(shí)踐篇，你要突出自己的重點(diǎn)并將面試官朝你擅長(zhǎng)的方向引導(dǎo)。比如你寫(xiě)在 CSS 組件化方面有研究，那一般面試官是不會(huì)想到去問(wèn)你兼容性相關(guān)問(wèn)題的，若萬(wàn)一面試官真問(wèn)你怎么兼容 IE，我建議你放棄這家公司，來(lái)支付寶。

這篇文章可能并不是那么正能量，因?yàn)閷?duì)于技術(shù)我們是需要有 Geek 精神的，但是本文卻違背了這一點(diǎn)，因?yàn)槲矣X(jué)得 Geek 精神是需要有一個(gè)方向的，除非你的方向就是 CSS 方面專(zhuān)家，否則精力上肯定跟不上，想想每天工作辣么久，還得去看電影，去裝修，去找妹子，去帶娃，想想就覺(jué)得時(shí)間好像都被狗吃了。所以如果你真的愿意花時(shí)間去看各種 spec，去關(guān)注 CSS 的進(jìn)展，你其實(shí)被我騙了，這并不是一種“高效而功利”的態(tài)度，而是前端工程師應(yīng)該有的態(tài)度。

哎，這套路我自己打99分，我其實(shí)并不是想騙大家去關(guān)注 CSS 的，我只是覺(jué)得，我們?cè)诠ぷ髦?，還是得好好思考下前端工程師的精神和價(jià)值。