最近有很多同學問我們前端該如何學，學習的路線是什么？所以本着為新手同學梳理一條比較清晰的學習路線，同時結合我這幾年的學習經歷，來寫這么一個“前端自學路線”系列，本篇先說說切圖那些事。
前端始於切圖，這應該是不容辯駁的。有些同學不愛寫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相關的知識。
切圖是要多練的，這個沒的捷徑，練多了自然有感覺。