StuQ 专访｜前端架构师CSS魔法：畅聊前端人生

前端居然也需要架构?是的，需要的！毕竟任何一项严肃的、长期的、大规模的工程，都是需要有人来设计架构的嘛！...

本文由 “StuQ” 微信公众号约稿并首发，由@CSS魔法 撰稿。

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



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

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

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

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

• 调研新技术、新工具，适时应用到团队中。
• 制定代码规范，并通过工具来确保规范的执行。
• 填补基础类库和业务开发之间的断层，提供工具库和 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 时代就有一个

table-layout: fixed

属性，可以改变表格的默认布局行为，使得我们可以精确指定每一列的宽度，不受表格内容的影响。所以即使是在 IE6 当道的年代，我也没有为表格样式发愁过。

不过有意思的是，即使在今天，这个属性仍然还是鲜为人知的黑魔法，真是让人哭笑不得啊。

总而言之，现在的孩子们是幸福的，你们生活在一个信息通畅、资源富足的时代。你们不需要眼巴巴地乞求 “大神们” 施舍只言片语的秘技，只要多读几页书，你也可以成为别人眼中的大神！

哦对了，上面提到 “瓶颈” 的问题。以我的经验来看，如果基础够扎实的话，单纯在学习方面，一般是不太会遇到所谓的 “瓶颈” 的。


前端领域的新技术和新工具层出不穷，你是如何看待和取舍的？



我对新技术是冷淡的，也是热情的。看似矛盾，不过我有我的道理。

我是一个典型的实用主义者。一般来说，我对那些无法立即应用于生产环境的技术并不是那么感兴趣，也不会花太多精力去研究。但一旦某项先进技术成熟之后，我也会立即跟上，因为我需要把它应用到产品线上发挥威力。

举个 CSS 领域的例子吧。Flexbox 的草案在好几年以前就已经出来了，但支持程度很糟糕，所以一开始我完全没有深究，连它的语法都没细看。后来当我发现主流的移动浏览器都已经支持 Flexbox 的基本特性之后，便立即将它应用到了百姓网手机站的 UI 框架中。

但直到现在，Flexbox 的高级特性也仍然没有得到广泛支持，所以对于这些高级特性，我还是连它们叫什么都记不清楚。类似的还有 CSS Grid Layout 啥的，我连语法都不知道——如果眼下还不能用，那我就先不关注了。追草案这种事情固然是有价值的，但我这个老年人就不掺和了罢。


那如何确保不错过优秀的新技术呢？



首先，我会关注高质量的信息源。同时，在团队内部也有开放的讨论环境，让个人获取到的优质信息流动起来，共享为团队的信息。

接下来，在面对巨大的信息量时，还需要快速取舍。因为精力有限，我只会关注那些已经在社区内经过基本验证的、已经在小范围内得到良好反馈的技术方案。初筛之后就会进入调研阶段，一旦发现某项新技术确有优越之处，且适用于团队，就会迅速投入使用。

对于已经认准的新技术和新工具，我们的投入是相当果断的，甚至是激进的。

举个例子，当 Grunt 开始火起来的时候，我没有跟进，感觉它并不对胃口；随后 Gulp 进入了我的视野：基于流、没有临时文件、以写脚本的方式来写构建任务……就是它了！我将 Gulp 推荐给团队，并迅速投入使用——百姓网应该是国内最早在生产环境使用 Gulp 的公司之一。后来，我们发现 Gulp 4 的新特性更符合自己的需求，又果断升级至 4.0 Alpha 版本。如今 4.0 正式版仍未发布，而我们已经提前享受 Gulp 4 快一年了。

我们也是国内较早将 ES6 引入开发流程的团队。此外，像 Stylus、ESLint、Rollup 等优秀工具在早期就被我们发掘并投入实战。这种敏锐，大概已经融入团队的血液之中了。


由你来翻译《CSS揭秘》这本书可谓众望所归，能谈谈翻译它的初衷吗？



这个说来话长。

我是一个 “产出欲” 很强的人。比如，从小喜欢动漫，就自己画连载，在同学中流传；后来迷上了电脑，就写文章投稿，在《电脑报》和《电脑爱好者》等报刊上发表。所以接下来，“著书立说” 自然成为我这辈子必定会做的一件事情。

不过很遗憾，在咱这儿，写书或者译书是一件吃力不讨好的事情。别说书卖不掉，就算书卖得好，写书的人也未必能赚到几个钱。所以这些年虽然也接到过出版社的写书和译书邀约，但都回绝了。每天为生计奔忙，出书……太奢侈了。

但当《CSS 揭秘》这本书出现在我面前时，我动摇了。

这本书不一样。当年啃完《CSS 权威指南》和《精通 CSS》那一堆 CSS 书之后，我也陆续读过其它书，但再也没有遇到能与前两本书相提并论的重量级 CSS 著作。终于，《CSS 揭秘》这本书的出现，让我找回了当初学习 CSS 时欣喜若狂的感觉。

所以这一次，放下功利，只为情怀。我咬牙签下了这本书的翻译合约，花了近四个月的业余时间，把它翻译了出来。

（小编：我最近也在读这本书，确实非常经典。那么在翻译的过程中，你自己有哪些体会，或者说有哪些成长呢？）

首先最大的收获，应该就是终于有资格回答 “译书是一种怎样的体验” 这样的问题了吧！翻译一本书的体验确实跟我们平常翻译文章不一样，译书不仅考验你的技术能力和语言能力，更主要的是在考验你的毅力。个中滋味，大概只有过来人才能体会吧。

此外，翻译这本书的过程自然也是一个学习的过程。书中有大量内容是我从未掌握的实用技能；更难得的是，作者把她的思维路径清楚地呈现了出来。读这本书犹如跟一位智者对话，醍醐灌顶，豁然开朗。

最后，通过这本书，我对图书的编辑、排版、审校、出版流程有了更深入的理解，攒了不少经验值。这为我接下来自己写书打下了很好的基础。

这本书已经在 5 月初跟大家见面了。如果大家想收藏一本签名书，可以联系我的微信公众号 “CSS魔法”。


能推荐一些你工作生活中常用的软件和硬件工具吗？



我不是 geek，也没什么精力折腾，所以我选择软硬件的标准就是简单好用，不那么在意技术参数。这里就简单介绍一下我在用的、也觉得好用的装备吧。

我的主力电脑是一台 13 寸的 RMBP，已经用了三年多了，依然稳定流畅。外接显示器是 Dell U2412M。这款显示器我在微博上也推荐过，它的每个特点都命中我对显示设备的怪癖，堪称 “码农神器”。

机械键盘是 BenQ 的天机镜，性价比极高；推荐茶轴，易上手，适合码字。鼠标用过很多款，最喜欢的是多彩的第三代垂直鼠标 M510，家里囤了好几个（垂直鼠标的好，大概只有老年人才懂吧）。然而可惜的是，它不兼容 Mac，但愿多彩能复刻这款经典之作并解决这个问题吧……

目前在用的手机是 iPhone 和锤子 T1。这里推荐一下锤子的 Smartisan OS，即使你不买锤子的硬件，也可以尝试一下它的系统，优雅、省心。

在软件方面，首先要推荐的就是 JetBrains 公司出品的系列 IDE，我自己就是多年的 PhpStorm 正版用户。如果只做前端和 Node.js 开发的话，可以选择更轻量、更便宜的 WebStorm。每当看到身边有同学在简陋的编辑器上吭哧吭哧折腾各种插件来实现 IDE 的标配功能，我都会感叹，年轻真好（精力真旺盛）！

我买过很多软件，在 Mac 平台上买的第一款软件应该是苹果家的 Keynote。是的，当时 Keynote 还没有免费，我是花钱买的。史上最好的幻灯片制作软件，当之无愧。我在 CSS Conf 上所作的演讲《重拾 CSS 的乐趣》广受好评，Keynote 功不可没。


除了技术以外，生活中还有哪些让你感到兴奋的事情？



首先，很期待新家庭成员的到来！这是一个很大的话题，就不展开了。

然后，我不玩游戏……所以除了写代码之外，目前主要的业余爱好就是电影和动漫了。说到动漫，今天的二次元文化我已经跟不上了，所以只是自娱自乐，收集一些 “古董级” 作品的书、音像和周边。在电影方面，我偏爱好莱坞的爆米花科幻大片。我是漫威粉，DC 路人，迈克尔·贝一生黑。

在爱好的这些领域里，我不仅是 “内容消费者”，也是 “内容生产者”。比如有空的时候，我会画画、写影评、玩票配音、编排舞台剧、录制模玩视频、翻译美剧和电影字幕。创造内容的过程是充实的，收到支持和鼓励更是令人欣慰的。

此外，我每周会有固定的健身时间。感受到自己的身材一点点在变化，这种体验棒极了！


你希望哪些特质的小伙伴加入自己的团队?



嗯……简单总结一下，应该是 “热爱技术 + 有业务意识”，这两者缺一不可。

“热爱技术”，意味着在技术道路上具备长期的动力和潜力；而 “有业务意识”，则可以引导个人的技术为团队、为公司发挥出真正的价值。

我不迷信绝对的高智商，因为我自己是一个智力平庸的人——在百姓网这个聪明人扎堆的群体中，我的反应往往比其他人慢半拍，甚至慢好几拍。但这一点远远没有成为我工作中的短板——互联网公司的绝大多数工作远没有达到 “拼天赋” 的层面。只要找准自身定位，坚实推进，照样脱颖而出。

我也完全不在乎 “院校 / 学历 / 专业” 这回事儿。我没读过大学，贺老是哲学专业毕业的，团队当中还有学心理学和博物馆学（一个我没听过的专业）的同学……没有一个是所谓的 “科班出身”。而且话说计算机专业也压根儿不教前端嘛，所有人其实都是跨专业，哈哈！

说完这些，相信你已经感受到了，百姓网是一个开放而包容的团体。我们正在招募 3 年以上经验的前端工程师，有兴趣的同学不妨通过微博私信或 “CSS魔法” 微信公众号联系我。

感谢你的关注，我们下次再聊！CSS魔法老师参与的前端会员学习计划正在招募学员中，前端会员学习计划是面向前端从业人员的专题实践课程，每两周 1 次，全年 24 次课程分享。邀请一线的资深前端专家分享前端相关的项目经验，还原应用场景，从而提高学员在项目中解决问题的能力，让每位学员能够学以致用。扫描微信二维码进入课程咨询群。

    关注 StuQ