前端自学路线之切图篇

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

 

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

 

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

posted @ 2016-08-29 13:14  吕大豹  阅读(2785)  评论(1编辑  收藏  举报