魔法哥，请先介绍一下自己吧！

大家好，很荣幸接受 StuQ 的专访。我叫 “CSS魔法”，熟悉我的朋友都叫我 “魔法哥”。我目前在百姓网担任手机站的前端架构师。

StuQ 专访:CSS魔法畅聊前端人生（糟糕糟糕omg魔法怎么失灵了）

似乎 “前端架构师” 这个头衔经常会遭遇嘲讽——“前端居然也需要架构” 或者 “真会吹，拉大旗作虎皮吧” 等等。以前面对这种质疑，总会尴尬一番，不过时间长了也就坦然了：毕竟任何一项严肃的、长期的、大规模的工程，都是需要有人来设计架构的嘛！

百姓网的前端架构目标很明确：随着业务规模的扩张和团队的壮大，整个网站系统的复杂度也随之迅速上升；如何化繁为简、帮助业务工程师高效高质完成开发任务，这正是前端架构师的职责和挑战所在。

因此，简单概括一下，我在百姓网的日常工作包括：

调研新技术、新工具，适时应用到团队中。
制定代码规范，并通过工具来确保规范的执行。
填补基础类库和业务开发之间的断层，提供工具库和 UI 框架，并编写文档，提升业务开发效率。
优化构建流程和开发环境，提升业务工程师的开发体验。
组织定期的技术交流会和不定期的技术分享……

（小编：居然要做这么多事啊！）

其实这还不包括长年重构代码和偶尔投身业务开发呢。没办法，公司的年轻人个个身手不凡，我这个老年人也不能松懈啊，否则被他们超越碾压那简直是分分钟的事儿。

你在前端道路上经历过哪些转折点？

其实对我来说，“前端” 本身就是我的一大转折点。我从老家来到上海时，已经一把年纪了，当时我还没有任何互联网从业经验。仅凭一腔热血，便毅然决定离开传统行业，投身互联网大潮。

我的初衷是想从事交互设计、设计互联网产品，但当时找了一圈，没有找到一家公司认为有必要设立这样一个职位（想想现在应届生都可以随便拿到产品经理的工作机会，也是无语凝噎）。在当时的环境之下，如何切入这个行业、先让自己生存下来？

由于我有网页制作的经验，对此也很有兴趣，而且还跟设计沾边儿，于是我选择 “前端开发” 作为突破口，先跨进这个行业再说。没想到一入前端深似海，在这个大坑里越陷越深。

总体来说，我在前端领域奋斗的这几年，都还算顺利。如果要说这其中的 “转折点”，也确实有——两年前加入百姓网，感觉自己的职业生涯终于迈上了正轨。我喜欢这群优秀的小伙伴、宽松的环境，以及简单直接的做事方式；这里有更大的发挥空间，让我的前端技能也上了一个新台阶。

在技术成长的历程中，有哪些人或书籍对你影响至深？

我下决心转行到互联网行业，确实是因为一本书。当时我在书店看到一本书叫《Don't Make Me Think》，封面很特别，就随手拿起来翻看。这本书并不是技术书，是讲互联网产品设计的。我就在那儿站着一口气读了小半本，当时就震惊了！

“原来在地球的另一端，有一个美国人的设计理念与我如此契合？原来我天生是干这一行的啊！” 我一拍大腿就来了上海。

后来走上技术道路之后，也读过很多不俗的技术书籍，但显然都没有这本书对我的影响大。在来上海发展的这几年里，当我遇到挫折时，偶尔还会翻出这本书，找寻初衷，重燃斗志。

（小编：那再谈谈有哪些人对你有很深的影响？）

好的。在技术领域，我们往往是先接触到优秀的作品（开源项目、书籍、技术分享或博客文章等），因为被这些作品震撼，或者对这些作品有共鸣，然后才会逐渐了解它们背后的人。

这些优秀作品的幕后英雄有 “jQuery 之父” John Resig，有 Mocha / Stylus / Jade / Koa 等众多明星项目的作者 TJ 大神，有 Gobble / Rollup / Bublé 的作者 Rich Harris 等等。他们是聪明的，更是智慧的，他们的远见卓识和开拓精神不断激励着我。

那你遇到过瓶颈吗？是如何突破的？

如果说我在这些年的前端历程中遇到过什么瓶颈的话，那多半是由前端领域本身的快速发展引起的。近些年前端领域的新技术、新工具、以及新的实践方式都层出不穷，稍不留神就会有落伍的感觉。而每个人精力都是有限的，面对这样的局面，难免会有遇到瓶颈的压迫感。

我自己的应对方式是抓住核心，放弃自己很难精通的、一时用不到的、或者对当下想做的事情价值不大的技术方向。比如一路以来，我放弃了富媒体方向的 Flash，放弃了图形与游戏方向的 Canvas 和 WebGL，放弃了单页应用方向的 MV*，放弃了语言方向的 FP 等等。

当然这些 “放弃” 都是战略性的，而不是永久性的。毕竟精力有限，不可能面面俱到。不过，一旦某个方向变成自己必须攻克的战略要地，那我也必然会义无反顾跃入新坑。

除了技术范畴之外，我还会把一部分精力放在 “人” 身上——就是写代码的这群人。个人英雄的时代一去不复返了，单打独斗能力再强，也难成气候。因此，帮助身边的小伙伴快速成长，打造一支梯队完备、技能互补的前端开发团队，往往更具现实意义。有些时候，这也可以成为一种 “突破瓶颈” 的解决方案——每当团队里的小伙伴攻克了某项新技术时，我都可以宽慰自己：我不会没关系，有小伙伴可以顶上！

对于前端初学者，你有哪些经验想分享给他们？

好的，这个问题挺适合我来回答的。因为我自己也一直处在学习的状态之中；另一方面，我这些年写博客始终以初中级开发者作为主要受众；最近开始写 “CSS魔法” 微信公众号，也仍然关注前端初学者群体。

可以聊的经验有很多，但我觉得最重要的应该是——“系统学习、打好基础”。虽然前端领域日新月异，新技术层出不穷，但真正基础的东西是不会过时的。

去年夏天参加 CSS Conf 的同学可能还有印象，我聊到刚来上海时，为了找到一份前端工作，我把市面上所有的 CSS 书籍全部买来，全部啃光，迅速且系统地掌握了 CSS 的基础知识。其实我当时还快速扫完了市面上口碑不错的 HTML 书和 JS 书。

（小编：我记得，当时台下的同学一片惊叹。你当时是怎样的状态？）

大家可能觉得这样一本接一本啃书很辛苦，但当时的我却是无比幸福的。因为在那之前，我在也曾因为兴趣学习过网页制作知识，但当时的状态就像是在黑暗的迷宫中摸索——由于无人指导，我的学习方式基本上就是模仿别人网站的代码，或是在网上收集别人发表的各种技巧。虽然把找来的一句句代码拼凑在一起通常也可以生效，但我完全不知其所以然，那些代码片断对我来说无异于外星人的咒语。

当时在书店里能找到的相关书籍也就是一些迎合国人 “短平快” 心理的快餐书，比如 “现学现用” 或 “代码速查 300 例” 之类。我是一个喜欢打破沙锅问到底的人，这些没头没尾的所谓技巧显然无法满足我的好奇心，失望而归。

几年之后，以图灵为代表的科技图书公司开始引进国外的经典教程和参考书。当《精通 CSS》、《JavaScript 高级程序设计》这些著作捧到我手上时，你可以想像我当时有多么欣喜若狂。

在疯狂求知的过程中，我发现，前些年我在网上费尽辛苦收集到的如凤毛麟角般珍稀的黑魔法，其实在书里都有着更加全面和系统的讲解。当我稳固地掌握了 HTML、CSS、JS 的基础知识之后，我惊讶地发现，原先那些看似神奇、背都背不下来的外星咒语，早已融入我的血液，成为信手拈来的本能。

（小编：能举个例子吗？）

好的。在 CSS 布局成为主流之后，我们仍然需要用表格来呈现行列式的数据。由于表格天生弹性包容的特性，它的布局行为很难捉摸，我们为表格设定的列宽很容易就被单元格的内容撑大了。

但如果你完整读过《CSS 权威指南》，就会知道，早在 CSS2 时代……