最近有很多同學問我們前端該如何學，學習的路線是什麼？所以本著為新手同學梳理一條比較清晰的學習路線，同時結合我這幾年的學習經歷，來寫這麼一個“前端自學路線”系列，本篇先說說切圖那些事。
前端始於切圖，這應該是不容辯駁的。有些同學不愛寫html和css，特別是從後端轉過來的同學，我覺得這樣是不行的，因為前端這個職位本來就是這麼發展而來的。
和切圖相關的當然就是HTML和CSS了。HTML就很淺了，你只需知道HTML4和HTML5的文件規範有哪些區別就行了。CSS的話，首先你得知道都有哪些屬性，他們都用於哪些場景，能熟練地還原PC端的頁面，併相容各瀏覽器，就算是切圖入門了。這時候你寫出來的頁面應該是充滿了div，CSS中充滿了px單位以及冗餘屬性。
有些人覺得能把圖切出來就可以了，其實不然，路還遠著呢。接下來是切圖中級之旅。你需要對HTML各個標籤都瞭如指掌，知道他們的語義和使用場景。關於CSS，你應該大致讀一遍W3C規範，瞭解不同的盒模型(行內、塊級)的佈局規範，瞭解文件流、IFC、BFC等概念，簡言之就是要知其所以然，通過原理來做事，而不是像以前那樣靠猜和試來解決問題。
CSS的使用也是一個積累的過程，在此過程中你需要積累各種技巧，比如左右兩欄自適應佈局、傳說中的雙飛翼佈局、margin負值佈局、各種情況下的居中技巧等等。
到了中級的時候，你還應該掌握HTML5和CSS3中的新特性。你也要開始能做移動端的頁面了。新的標籤和CSS屬性都要門兒清。圓角、陰影自然不在話下，你還得掌握漸變(transition)以及變形(transform)，以及動畫(animation)。你做的頁面不再是隻用px來定死寬高，而要學著進行響應式佈局，學習flexbox的佈局模式。
當你做了幾百張頁面，能熟練寫出移動端的頁面，掌握各種場景下的最優佈局，並且能從原理上解釋一些現象。那麼恭喜你，中級切圖仔可以出師了。你應該感受到此時已經是一次質變了。
是的，切圖之旅還沒結束，來看高階的吧。高階有兩個關鍵字：架構、效能。
先說架構。在中級出師之後你已經是切圖師中的戰鬥機了，這時候你就應該考慮如何來架構一個整站的CSS了。為什麼要架構呢？因為你在此前肯定會經歷不斷升級維護CSS程式碼的痛苦，那就是程式碼只增不減，舊的樣式從來不敢刪，每次升級都是用更高的優先順序來覆蓋掉舊樣式。程式碼在修改的時候及其不靈活，有時牽一髮而動全身，有時需要把相同程式碼複製貼上到n個地方。
你可能會嘗試把CSS程式碼按照模組為單位來劃分，或者是自己定義的其他規則和編碼規範，作為約定所有人遵守。現在的話，最佳實踐就是CSS預編譯（sass/less/stylus），你應該掌握如何使用，以及如何用這些工具來架構出靈活的CSS。
關於效能，也是高階切圖師要關注的。你需要了解瀏覽器渲染DOM樹的過程，知道重繪（repaint）、迴流（reflow）這兩個概念，以及怎樣的佈局能夠儘量減少迴流。你應該知道硬體加速是個什麼鬼，知道translate3D能開啟硬體加速的原因是什麼。你要學著用chrome的timeline來分析整個頁面的渲染過程，哪裡耗時長，該用怎樣的方案來解決。
囉嗦了這麼多，以上就是前端工程師的第一步——切圖仔的學習路線——的主幹部分。至於如何來進行這些知識的學習，我在前半部分也做了分析，用我們的“元能力”思維去自學就好。網上的資料很多，針對這條線路進行搜尋就行，我在這裡也可以推薦幾個：張鑫旭的部落格中有很多CSS基本原理的文章，玉伯、張克軍的部落格早年也有很多經典的關於頁面渲染相關的文章，大漠的w3cplus上面css的知識也很多，以及sass/less相關的知識。
切圖是要多練的，這個沒的捷徑，練多了自然有感覺。