前端自学路线之切图篇

最近有很多同学问我们前端该如何学，学习的路线是什么？所以本着为新手同学梳理一条比较清晰的学习路线，同时结合我这几年的学习经历，来写这么一个“前端自学路线”系列，本篇先说说切图那些事。

 

前端始于切图，这应该是不容辩驳的。有些同学不爱写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相关的知识。

 

切图是要多练的，这个没的捷径，练多了自然有感觉。