摘要：我們都知道您是國(guó)內(nèi)知名的專家，是什么樣的情結(jié)使得您愿意將魔法作為自己的別名大家好，很榮幸接受圖靈的專訪。在這一堆書(shū)里，有一套上下冊(cè)教程叫作談是由圖靈引進(jìn)的哦。從偶像那里得來(lái)一個(gè)名字，很榮幸而且這其中也有圖靈的功勞，也是緣份。

非商業(yè)轉(zhuǎn)載請(qǐng)注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/article/216538

圖靈訪談非常有幸能邀請(qǐng)到“魔法哥”，進(jìn)行一期專訪。我們都知道您是國(guó)內(nèi)知名的 CSS 專家，是什么樣的 “CSS情結(jié)” 使得您愿意將 “CSS魔法” 作為自己的別名？

大家好，很榮幸接受圖靈的專訪。我叫 “CSS魔法”，熟悉我的朋友都叫我 “魔法哥”。 這個(gè)問(wèn)題問(wèn)得好，瞬間把我的思緒拉回八年之前——那時(shí)我剛開(kāi)始系統(tǒng)地學(xué)習(xí)前端知識(shí)。當(dāng)時(shí)為了找一份前端工作，我把市面上所有的 CSS 書(shū)籍全部買(mǎi)來(lái)，全部啃光，迅速且系統(tǒng)地掌握了 CSS 的基礎(chǔ)知識(shí)。

在這一堆書(shū)里，有一套上下冊(cè)教程叫作《Eric Meyer談CSS》（是由圖靈引進(jìn)的哦）。我記得很清楚，書(shū)里有這么一段話：“在準(zhǔn)備好語(yǔ)義化的結(jié)構(gòu)之后，我們?cè)俳o它施加一點(diǎn)兒 CSS 魔法……” 我當(dāng)時(shí)感覺(jué)這句話正好契合 CSS 帶給我的體驗(yàn)！

我很喜歡 CSS 這門(mén)技術(shù)，它優(yōu)雅、神奇、充滿魔力，短短幾行代碼就可以讓我們的網(wǎng)頁(yè)脫胎換骨、煥然一新。于是從那時(shí)起，我就開(kāi)始使用 “CSS魔法” 這個(gè)網(wǎng)名了。以這個(gè)名字注冊(cè)了微博，后來(lái)還創(chuàng)建了 “CSS魔法” 微信公眾號(hào)，分享自己在前端領(lǐng)域的學(xué)習(xí)經(jīng)驗(yàn)；在為圖靈翻譯《CSS揭秘》一書(shū)時(shí)，也很自然地以此為筆名了。

說(shuō)到 Eric Meyer，他還是《CSS權(quán)威指南》的作者，也是我的偶像。從偶像那里得來(lái)一個(gè)名字，很榮幸；而且這其中也有圖靈的功勞，也是緣份。 請(qǐng)簡(jiǎn)單介紹一下您在百姓網(wǎng)的工作內(nèi)容吧！

我目前在百姓網(wǎng)擔(dān)任手機(jī)站的前端架構(gòu)師。比較尷尬的是，“前端架構(gòu)師” 這個(gè)頭銜經(jīng)常遭遇質(zhì)疑：“前端居然也需要架構(gòu)？” 所以我也趁這個(gè)機(jī)會(huì)闡述一下，我理解中的前端架構(gòu)到是什么。

其實(shí)不管是前端還是后端，任何一項(xiàng)嚴(yán)肅的、長(zhǎng)期的、大規(guī)模的工程，都是需要有人來(lái)設(shè)計(jì)架構(gòu)的。

百姓網(wǎng)的前端架構(gòu)目標(biāo)很明確：隨著業(yè)務(wù)規(guī)模的擴(kuò)張和團(tuán)隊(duì)的壯大，整個(gè)網(wǎng)站系統(tǒng)的復(fù)雜度也隨之迅速上升；如何化繁為簡(jiǎn)、幫助業(yè)務(wù)工程師高效高質(zhì)完成開(kāi)發(fā)任務(wù)，這正是前端架構(gòu)師的職責(zé)和挑戰(zhàn)所在。

因此，簡(jiǎn)單概括一下，我在百姓網(wǎng)所做前端架構(gòu)工作包括：

編寫(xiě)工具庫(kù)和 UI 框架，并提供文檔，提升業(yè)務(wù)開(kāi)發(fā)效率

優(yōu)化開(kāi)發(fā)流程，提升業(yè)務(wù)工程師的開(kāi)發(fā)體驗(yàn)

制定各類(lèi)開(kāi)發(fā)規(guī)范，并通過(guò)工具來(lái)確保規(guī)范的執(zhí)行

調(diào)研新技術(shù)、新工具，并適時(shí)應(yīng)用推廣

組織定期的技術(shù)交流會(huì)和不定期的技術(shù)分享

……

看來(lái)“魔法哥”要全面把握開(kāi)發(fā)流程，規(guī)劃框架，制定規(guī)范。那平時(shí)還需要寫(xiě)代碼嗎？

其實(shí)，長(zhǎng)年重構(gòu)代碼也都是份內(nèi)事，偶爾還需要投身業(yè)務(wù)開(kāi)發(fā)。畢竟架構(gòu)層作為業(yè)務(wù)層的堅(jiān)實(shí)后盾，松懈不得?。?/p>

您覺(jué)得哪些 CSS 知識(shí)是必須掌握的？

對(duì)一個(gè)專業(yè)的 CSS 開(kāi)發(fā)者來(lái)說(shuō)，首先，CSS2 的核心知識(shí)必須完全掌握。以《CSS權(quán)威指南》（第三版）為例，除了 “聲音樣式” 之外，這本書(shū)的所有內(nèi)容都是應(yīng)該透徹理解的。即使記不住某些冷僻屬性的名稱與行為，也需要知道在哪里可以快速查閱。

接下來(lái)，關(guān)于 CSS3，很多同學(xué)都問(wèn)過(guò)我這樣一個(gè)問(wèn)題：“魔法哥，現(xiàn)在瀏覽器都支持 CSS3 了，我跳過(guò) CSS2 直接學(xué) CSS3 可以嗎？”

在回答這個(gè)問(wèn)題之前，我們需要先搞清楚 “CSS3” 到底是什么。讀過(guò)《CSS揭秘》這本書(shū)的同學(xué)應(yīng)該都很清楚了，“CSS3” 是一個(gè)俗稱，并不是 W3C 的官方術(shù)語(yǔ)?；旧纤荂SS2 之后更新或新增的 CSS 規(guī)范模塊的合稱。

實(shí)際上，CSS3 相對(duì)于 CSS2 并不是類(lèi)似軟件版本更替那樣的升級(jí)。CSS2 的全稱是 “CSS Level 2”，后續(xù)的 CSS 規(guī)范并不是完全以替代品的形態(tài)出現(xiàn)的，某些 Level3 的 CSS 規(guī)范模塊（或新增的規(guī)范模塊）往往是基于 CSS2 來(lái)擴(kuò)展的。

因此，對(duì)于 CSS 學(xué)習(xí)者來(lái)說(shuō)，如果買(mǎi)了一本只講 CSS3 新增內(nèi)容的教程或參考書(shū)，那還需要搭配 CSS2 的書(shū)來(lái)看。事實(shí)上，由于篇幅所限，市面上絕大部分以 “CSS3” 為賣(mài)點(diǎn)的圖書(shū)確實(shí)都不會(huì)重復(fù)講解 CSS2 的內(nèi)容?？吹竭@里，相信上面的問(wèn)題在大家心中已經(jīng)得出答案了吧。

我自己的學(xué)習(xí)路徑是這樣的：通過(guò)《CSS權(quán)威指南》和《精通CSS》等 CSS2 時(shí)代的經(jīng)典教程來(lái)打好 CSS2 的基礎(chǔ)（因?yàn)?CSS2 已經(jīng)完全穩(wěn)定了）；對(duì)后續(xù)新技術(shù)和新規(guī)范的了解和掌握，通常求助于 MDN 等在線資源（因?yàn)樽兓喈?dāng)快）。如果新入門(mén)的同學(xué)面對(duì)龐雜的 CSS 體系感覺(jué)無(wú)從下手，不妨參考這條路徑。

有圖靈社區(qū)網(wǎng)友提問(wèn)：您在工作中常用的 CSS 實(shí)用技巧有哪些？

首先，我會(huì)毫不猶豫地推薦大家使用 CSS 預(yù)處理器。由于 CSS 并不是編程語(yǔ)言，并不具備抽象能力，當(dāng)網(wǎng)站的規(guī)模發(fā)展到一定程度之后，原生 CSS 很難解決抽象與復(fù)用的問(wèn)題。而預(yù)處理器則正好彌補(bǔ)了 CSS 在這方面的不足。

即使你不打算學(xué)習(xí)預(yù)處理器的特有語(yǔ)法，甚至還有些排斥，那也不妨嘗試?yán)盟哪K機(jī)制來(lái)拆分和組織代碼。由于預(yù)處理器大多兼容 CSS 原生語(yǔ)法，因此你可以保持原來(lái)寫(xiě)代碼的習(xí)慣，僅利用預(yù)處理器在模塊化方面的功能。

對(duì)于多人合作的團(tuán)隊(duì)來(lái)說(shuō)，通過(guò)模塊來(lái)拆分代碼尤為重要。雖然引入預(yù)處理器會(huì)要求你在工作流中加入構(gòu)建環(huán)節(jié)，但我認(rèn)為這個(gè)成本是完全值得的。

接下來(lái)，想跟大家分享的經(jīng)驗(yàn)就是：做好 CSS 代碼的 “分層”。我設(shè)計(jì)的 CSS 架構(gòu)通常都會(huì)由 “Normalize + Reset → 通用基礎(chǔ)樣式 → UI 組件 → 頁(yè)面通用的布局框架 → 單個(gè)頁(yè)面的布局和樣式” 這幾個(gè)層級(jí)構(gòu)成，越往左越靠近架構(gòu)，越往右越靠近業(yè)務(wù)。

劃好層級(jí)并把代碼寫(xiě)到正確的層級(jí)去，可以帶來(lái)很多好處：在團(tuán)隊(duì)分工上，可以把不同層級(jí)的代碼交給不同的人來(lái)開(kāi)發(fā)和維護(hù)，相當(dāng)于關(guān)注點(diǎn)分離；從架構(gòu)角度來(lái)看，也可以實(shí)現(xiàn) “控制復(fù)雜度” 這一重要目的。

還有就是善用工具。比如通過(guò) Lint 程序來(lái)保障代碼規(guī)范的執(zhí)行，通過(guò)構(gòu)建工具來(lái)讓重復(fù)勞動(dòng)盡可能自動(dòng)化，通過(guò) Autoprefixer 這樣的工具來(lái)加工或生成代碼，等等。俗話說(shuō)，磨刀不誤砍柴工，多看多聽(tīng)多試，用開(kāi)放的心態(tài)去了解和嘗試新工具，往往會(huì)有不錯(cuò)的收獲。

如果這位網(wǎng)友想問(wèn)的是 “有哪些實(shí)用的 CSS 特性”，那我覺(jué)得至少要提一下 Flexbox。它是 CSS3 引入的更強(qiáng)大、更易用的布局方式，而且我們?cè)谝苿?dòng)端已經(jīng)可以安全地使用 Flexbox 的基礎(chǔ)特性了。其它的特性，比如高級(jí)選擇符、漸變、動(dòng)畫(huà)等高級(jí)特性，也非常有價(jià)值，我在編寫(xiě) UI 框架時(shí)都有實(shí)際應(yīng)用。

此外，大家可能還想了解在編寫(xiě) CSS 時(shí)需要掌握的原則和思路。這里我會(huì)推薦《CSS揭秘》這本書(shū)中的“CSS 編碼技巧”一節(jié)。我一直想寫(xiě)篇文章來(lái)講述自己多年積累的 CSS 經(jīng)驗(yàn)，但一直苦于找不到合適的切入點(diǎn)，總怕掛一漏萬(wàn)。而當(dāng)我讀到這一節(jié)時(shí)終于釋然——原來(lái)已經(jīng)有人幫我做了這件事情！隨后我也將它親手翻譯了出來(lái)，也算了卻了一樁心事。

前端領(lǐng)域的技術(shù)更新非?？?，常常是一門(mén)技術(shù)還沒(méi)學(xué)明白，另一門(mén)技術(shù)又火了，你是如何取舍的呢？

確實(shí)，近些年前端領(lǐng)域的新技術(shù)、新工具、以及新的實(shí)踐方式都層出不窮，稍不留神就會(huì)有落伍的感覺(jué)。而每個(gè)人精力都是有限的，面對(duì)這樣的局面，難免會(huì)有一種疲于奔命的壓迫感。

我自己的應(yīng)對(duì)方式是抓住核心，放棄自己很難精通的、一時(shí)用不到的、或者對(duì)當(dāng)下想做的事情價(jià)值不大的技術(shù)方向。比如一路以來(lái)，我放棄了富媒體方向的 Flash，放棄了圖形與游戲方向的 Canvas 和 WebGL，放棄了單頁(yè)應(yīng)用方向的 MV*，放棄了語(yǔ)言方向的 FP ，等等。

當(dāng)然這些 “放棄” 都是戰(zhàn)略性的，而不是永久性的。畢竟精力有限，不可能面面俱到。不過(guò)，一旦某個(gè)方向變成自己必須攻克的戰(zhàn)略要地，那我也必然會(huì)義無(wú)反顧躍入新坑。

除了在技術(shù)范疇內(nèi)作取舍，我還會(huì)把一部分精力放在 “人” 身上——就是寫(xiě)代碼的這群人。個(gè)人英雄的時(shí)代一去不復(fù)返了，單打獨(dú)斗能力再?gòu)?qiáng)，也難成氣候。因此，幫助身邊的小伙伴快速成長(zhǎng)，打造一支梯隊(duì)完備、技能互補(bǔ)的前端開(kāi)發(fā)團(tuán)隊(duì)，往往更具現(xiàn)實(shí)意義。有些時(shí)候，這也可以成為一種 “突破瓶頸” 的解決方案——每當(dāng)團(tuán)隊(duì)里的小伙伴攻克了某項(xiàng)新技術(shù)時(shí)，我都可以寬慰自己：我不會(huì)，沒(méi)關(guān)系，有小伙伴可以頂上！

有圖靈社區(qū)網(wǎng)友提問(wèn)：CSS 與它的小伙伴兒 JavaScript 的關(guān)系是怎樣的？有什么共同點(diǎn)和差異？

哇噢，這個(gè)問(wèn)題完全是面試題的既視感啊！好的，我來(lái)好好回答一下，重溫被面試的感覺(jué)。

根據(jù) Web 標(biāo)準(zhǔn)的 “分離” 原則，網(wǎng)頁(yè)界面由三層構(gòu)成：結(jié)構(gòu)層、表現(xiàn)層、行為層。這三者在技術(shù)上分別由 HTML、CSS、JS 來(lái)實(shí)現(xiàn)。大家都知道有句話叫 “術(shù)業(yè)有專攻”，在網(wǎng)頁(yè)上也是一樣，不同的層應(yīng)該由不同的技術(shù)來(lái)實(shí)現(xiàn)。

在近些年，CSS 的能力得到了不少提升，比如 :hover 偽類(lèi)的增強(qiáng)以及 :checked、:target 等新偽類(lèi)的出現(xiàn)，令原本只能由 JS 實(shí)現(xiàn)的交互功能也可以用 CSS 來(lái)實(shí)現(xiàn)了。這意味著，在某些場(chǎng)景下，這兩者的功能有重疊的地方。

不過(guò)從原理上來(lái)說(shuō)，CSS 只具備修改渲染樹(shù)的能力，無(wú)法修改 DOM 結(jié)構(gòu)（“渲染樹(shù)” 是指 DOM 樹(shù)在應(yīng)用樣式之后產(chǎn)生的、用于渲染網(wǎng)頁(yè)界面的數(shù)據(jù)模型）。CSS 可以通過(guò) display、visibility、opacity 等屬性來(lái)控制元素的顯隱，但無(wú)法把元素從 DOM 樹(shù)上刪除或移動(dòng)，也無(wú)法創(chuàng)建新的 DOM 元素。這是 CSS 的能力邊界。

雖然這兩者的功能有一些重疊，但它們并不是互斥的。JS 和 CSS 是可以合作的，而且我們應(yīng)該擅用這種合作關(guān)系，發(fā)揮各自所長(zhǎng)。舉例來(lái)說(shuō)，CSS 的聲明式特性比較簡(jiǎn)單易懂，在管理樣式方面更加易于書(shū)寫(xiě)和維護(hù)。因此，在實(shí)現(xiàn)某些動(dòng)態(tài)效果的時(shí)候，我們可以把不同狀態(tài)的樣式以類(lèi)的形式寫(xiě)在 CSS 中，然后讓 JS 通過(guò)切換元素的類(lèi)來(lái)實(shí)現(xiàn)樣式的變化。

有圖靈社區(qū)網(wǎng)友提問(wèn)：鑒于 CSS 擅長(zhǎng)處理復(fù)雜布局和絢麗的視覺(jué)效果，眼下 Web 開(kāi)發(fā)者可以跳過(guò) JavaScript，走 “UI + 后端” 的路線么？

簡(jiǎn)單地說(shuō)：不可能。

首先說(shuō)一下 “UI” 這個(gè)概念。UI 并不是靜態(tài)的布局和樣式，不是設(shè)計(jì)師發(fā)給我們的 PSD 圖像。UI 是用戶界面，它的核心是交互，而交互需要由 JS 來(lái)實(shí)現(xiàn)。交互以及交互傳達(dá)出的用戶體驗(yàn)，才是眼下前端的核心價(jià)值。

接下來(lái)，我們回到實(shí)際的開(kāi)發(fā)場(chǎng)景中來(lái)看待這個(gè)問(wèn)題。如果是團(tuán)隊(duì)作戰(zhàn)，那么團(tuán)隊(duì)中的個(gè)體當(dāng)然可以有所側(cè)重和取舍。在整個(gè)技術(shù)棧中，自己放下的某個(gè)環(huán)節(jié)只要有小伙伴可以頂上，那就沒(méi)啥大問(wèn)題。不過(guò)如果是打算通吃前后端的全棧工程師給自己做職業(yè)規(guī)劃，那么 JS 是繞不開(kāi)的。

其實(shí)在圖靈社區(qū)里，我跟這位提問(wèn)的網(wǎng)友已經(jīng)有過(guò)交流。他回避 JS 的原因主要在于入門(mén)時(shí)被網(wǎng)上的低劣教程所誤導(dǎo)，對(duì) JS 留下了錯(cuò)誤的第一印象，進(jìn)而心生抵觸。

這位網(wǎng)友的經(jīng)歷讓我十分惋惜，同時(shí)也不由地深深感嘆：我們?cè)趯W(xué)習(xí)一門(mén)技術(shù)時(shí)，選擇規(guī)范、系統(tǒng)的學(xué)習(xí)途徑是多么重要啊！所以這里要再一次鄭重推薦圖靈的程序設(shè)計(jì)叢書(shū)，魔法哥信賴之選！

有圖靈社區(qū)網(wǎng)友提問(wèn)：您是否贊同將前人留下的技巧直接運(yùn)用到自己的項(xiàng)目中？是否需要 “知其然、知其所以然” 的研究精神？

這要看你給自己的定位是什么。我認(rèn)為技術(shù)工作者大致可以分為兩類(lèi)。第一類(lèi)人單純被技術(shù)本身所吸引——相信我們都有感觸，技術(shù)本身就有一種迷人的美！而第二類(lèi)人把技術(shù)作為手段，他們學(xué)習(xí)技術(shù)的最終目的是通過(guò)技術(shù)來(lái)推動(dòng)一些事。這兩種技術(shù)人都有各自合理的出發(fā)點(diǎn)，并沒(méi)有孰對(duì)孰錯(cuò)之分。

那么，如果你是第一類(lèi)人，那你對(duì)自己的規(guī)劃和定位必然是某個(gè)領(lǐng)域的技術(shù)專家。所有有價(jià)值的技術(shù)都應(yīng)該被你吃透，而且相信你自己也會(huì)有源源不斷的強(qiáng)烈興趣，去把這些技術(shù)掰開(kāi)了、揉碎了研究到極致。

而如果你是第二類(lèi)人，那么 “知其所以然” 就不是必須的了。尤其是在團(tuán)隊(duì)中，你可以把 “知其所以然” 的任務(wù)交給技術(shù)專家，把有限的精力投入到更適合自己的地方去。

回想自己一路以來(lái)的經(jīng)歷，能否給前端初學(xué)者分享一些學(xué)習(xí)經(jīng)驗(yàn)？

我這些年寫(xiě)博客始終以初中級(jí)開(kāi)發(fā)者作為主要受眾，創(chuàng)建的“CSS魔法” 微信公眾號(hào)也仍然關(guān)注前端初學(xué)者群體。因此可以聊的經(jīng)驗(yàn)有很多，最重要的應(yīng)該是——“系統(tǒng)學(xué)習(xí)、打好基礎(chǔ)”，因?yàn)檎嬲A(chǔ)的東西是不會(huì)過(guò)時(shí)的。

我也曾模仿別人網(wǎng)站的代碼，或是在網(wǎng)上收集別人發(fā)表的各種技巧，然后把找來(lái)的一句句代碼拼湊在一起。雖然這種方法通常也可以生效，但我完全不知其所以然，那些代碼片斷對(duì)我來(lái)說(shuō)無(wú)異于外星人的咒語(yǔ)。由于無(wú)人指導(dǎo)，無(wú)法系統(tǒng)地學(xué)習(xí)知識(shí)，當(dāng)時(shí)的狀態(tài)就像是在黑暗的迷宮中摸索一樣。

當(dāng)時(shí)在書(shū)店里能找到的相關(guān)書(shū)籍也無(wú)非是一些迎合國(guó)人 “短平快” 心理的快餐書(shū)，什么“現(xiàn)學(xué)現(xiàn)用”“代碼速查 300 例” 之類(lèi)。我是一個(gè)喜歡打破沙鍋問(wèn)到底的人，這些沒(méi)頭沒(méi)尾的所謂技巧顯然無(wú)法滿足我的好奇心，失望而歸。

幾年之后，以圖靈為代表的科技圖書(shū)公司開(kāi)始引進(jìn)國(guó)外的經(jīng)典教程和參考書(shū)。當(dāng)《精通CSS》《JavaScript 高級(jí)程序設(shè)計(jì)》這些著作捧到我手上時(shí)，你可以想像我當(dāng)時(shí)有多么欣喜若狂。

在瘋狂求知的過(guò)程中，我發(fā)現(xiàn)，前些年我在網(wǎng)上費(fèi)盡辛苦收集到的珍稀黑魔法，其實(shí)在書(shū)里都有著更加全面和系統(tǒng)的講解。當(dāng)我穩(wěn)固地掌握了 HTML、CSS、JS 的基礎(chǔ)知識(shí)之后，我驚訝地發(fā)現(xiàn)，原先那些看似神奇、背都背不下來(lái)的外星咒語(yǔ)，早已融入我的血液，成為信手拈來(lái)的本能。

現(xiàn)在的孩子們是幸福的，你們生活在一個(gè)信息通暢、資源富足的時(shí)代。因此不需要眼巴巴地乞求 “大神們” 施舍只言片語(yǔ)的秘技，只要多讀幾頁(yè)書(shū)，你也可以成為別人眼中的大神！

十分感謝魔法哥花費(fèi)寶貴的時(shí)間接受圖靈的專訪，深入淺出，鞭辟入里！

我也很高興今天跟大家聊了這么多，我們下次再見(jiàn)!