思否有约｜ @XboxYan：学习 CSS 这件事，纸上得来终觉浅

业界作者：SegmentFault 2023-06-30 12:30:54

现在大部分时间都在做更基础、更底层一些的工作。

今天我们采访的嘉宾是 @XboxYan，他在大学时热衷于艺术，曾一度希望找到与设计相关的工作，但却意外地成为了一名前端工程师。当被问及未来是继续从事技术还是转向管理时，他毫不犹豫地回答会继续从事技术。在他身上，我们可以感受到一种简单、认真和持之以恒的品质。本期我们非常荣幸地邀请到了他，接下来，让我们听听他的故事和心得分享。

Q：向大家简单的介绍一下自己吧～

大家好，我叫严文彬，大家对这个名字可能不太熟悉，因为我在社区上面用的名称都是 XboxYan。我是 2014 年毕业的，到现在工作快 9 年了，做的是偏视觉方面的一些前端工作。

工作以前有挺多的爱好，会打乒乓球，或者画画，上班以后好像都没什么了。现在的话，周末可能会一天的时间都在家里写文章或什么的，或者就在附近的公园走一下这样。

Q：你是如何进入前端这个行业的？

我本来不是这个专业的，因为我学的其实跟这个不太沾边，叫光信息科学，就是搞激光，或者搞太阳能光纤的。其实这个专业也不是我自己选的，也是调剂的。我上大学的时候其实是比较喜欢艺术的，就是画画或者美术什么的。我毕业以后一直想找一份和设计相关的工作，然后就找到培训机构去了。培训的话也是设计方面的，有一部分就是讲 Web 相关的，网站设计。后来入职的时候我以为我是做设计的，结果发现我是做前端的，有一部分时间也做过设计，但主要还是做前端。就这样就到这个行业来了，有点偶然。

Q：目前主要的工作内容是什么，对前端开发有什么看法？

我现在的工作其实没太大变化，有些人可能做着做着就走管理去了，我其实就是一直在做最底层的工作。从工作到现在，前端的区别主要就是用到的一些技术不太一样了。以前我们那个时候都是 jQuery 什么的，后来就慢慢地变成了现在的 Vue、React，其实这整个过程我都是经历过的。

这些技术一出来的时候，我就赶紧紧跟它的步伐，出来什么就学什么。对于这些工具和框架，我现在已经没有过于去追求了，我可能还没有大部分人那么熟悉，因为我现在大部分时间都在做更基础、更底层一些的工作。比如 CSS 框架，我以前可能会有什么框架就赶紧拿来用，用市面上的一些框架，但是现在的话，我基本上不用这些框架了，都是自己手写框架。因为用别的框架会有一些学习成本，再就是如果框架自身不满足需求的话，还要去看那个框架是怎么实现的。所以有时候综合下来还不如说我自己写吧，其实写起来也不比用那些框架慢，真的。

Q：CSS 目前的发展状况如何？

CSS 不像 JS ，照着 API 你马上就会用，CSS 的话可能你看着那个文档就那么一点，但是实际上其实还是有很多你想不到的地方。因为我自己本来是比较喜欢视觉或设计那些方面的，工作几年以后，我感觉我对 CSS 会更有感觉、更有兴趣。CSS 光看文档是不行的，还是要写很多 Demo。像我每次写文章都要先把 Demo 写好，然后再把一些思路什么的讲出来。

CSS 现在发展得已经比较快了，相对于以前的话，各种浏览器特别随意，标准不统一，很多特性没办法兼容。现在 IE 已经彻底退出了，而 Chrome 每个版本号的更新，都会带来一些相关的 CSS 特性。每次它一更新，我马上就会去看它有哪些新的 CSS 特性，然后再去验证一下，验证以后就可以写文章了。总之，CSS 目前的发展我觉得还是非常乐观的，以前只能用 JS，或者很多复杂的方法才能做的事情，现在用 CSS 就可以实现了。就比如把一个颜色加深或者渐变，像这样的工作以前只能通过 JS，或者通过预编译的方式，就是生成一堆颜色出来，但是现在已经可以动态生成和它相关的一些加深的颜色或者简单的颜色，比如那种主题网站，就可以切换皮肤，只要改一个变量，其它的就都跟着变了。

Q：现在很多新人上手就是 TailwindCSS 这种原子化 CSS 框架，如何看待这种现象？

有好处也有坏处。我自己的话，其实是不太喜欢这种风格的，写了以后感觉整个 HTML 都像乱码一样，因为它把 CSS 那些简写全部写在 HTML 页面里了，这样导致要找一个东西会很麻烦。我们以前写个 div，要想一个类名，比如它叫什么 header 啊 content 啊这些名称，用了这个框架以后，相当于不用再写类名了，全部写那种简写，这对有些初学者来说，写起来可能会更快一点，不用想什么名字，要什么样式直接写就行了。但是，比如像那种居中的属性，有些简写实际是好几个属性合起来的，换一个环境没办法用这种框架的时候，可能就不会写了，或者说根本不知道这个居中它到底是怎么实现的。

对我而言，我可能不会去深入研究它，但是也要知道这东西是做什么的，该怎么用，或者说怎么改它。对于新人，我其实不太推荐这种方式。

Q：可以介绍一下你开源的 UI 组件库 xy-ui 吗？

这个组件库是一个基于 Web Components 规范开发的，Web 原生的组件库。那个时候 Vue 和 React 刚刚起步，开发这个组件库就是想用原生的方式来实现，在任何框架里面它都可以运行，不管在什么项目中都可以用。这个框架没有用到任何外部的依赖，代码全部在里面，全是原生的。还有一个就是，那个时候我也想学一下 Web Components 相关的一些技术。当时我也是边做边学的一种态度，做完了以后，差不多关于 Web Component 的任何问题，基本上我都已经知道了。

做这个组件库已经过去两三年了，还不是特别完善，现在 CSS 的一些原生的特性又更新了很多新特性，最近打算重构，把一些新的特性给用上去。其实当时做这个也并不是要做成一个业界非常通用的组件，这个也是有困难的，现在 Star 也才 1.1 K，我感觉这个已经很不容易了。

我以前在写 Demo 的时候会用这个组件库，拿它做一些布局，做一些演示，比如那种滑动条或者什么的，会直接用这个里面的 UI。我在另外一个公司工作的时候，公司的中后台项目也是用的这个框架。

Q：工作至今有哪些变化和成长？有没有什么印象深刻的事？

我来到阅文以后，做了很多技术分享，都是在组内和部门里面，这个应该算是一个比较大的变化，因为我觉得这应该算是一种软技能。大部分做技术的人都是埋头写好代码就行了，但是我感觉不光要埋头写代码，而且还需要把自己的一些经验或者想法给分享出去，或者说提高一些自己的影响力，让更多的人知道自己，还可以锻炼一下口头表达能力，或者说一些演讲沟通能力。

在分享的过程中也会有很多收获。因为要讲一个东西肯定要把它给搞懂嘛，要不然自己都没搞懂怎么讲给别人听呢？有的时候为了准备一个东西，又额外地去学到了一些东西，我觉得这个也是对各方面都有帮助的。

我第一次上台去做分享，做了很多准备，前期比较紧张，还问了好多人，比如 PPT 做得怎么样，这里应该怎么讲啊？到哪个点了？PPT 的每一页我都标示了在什么时间段讲到什么地方。

Q：你是如何提升自己的技术的？有哪些经验和心得？

首先肯定要写 Demo 这个东西。我觉得学 CSS 最重要的是要写 Demo，很多东西光看文档根本不知道它会有什么效果，或者说它由几个属性组合起来，看文档是看不出来的。文档里介绍的各个属性都是独立的，必须要写，自己写Demo，自己尝试，不然的话可能就像前面提到的那种框架一样，只知道用哪几个属性，但是不知道这几个属性合起来会有什么效果。

然后就是看文档，看别人的一些博客，比如有很多 CSS 非常强的大佬，看他们的一些博客，还有国外的一些网站。基本上每天都会花个把小时去看一下，比如早上刚到公司的时候，可能状态不那么好，就去看一下文章什么的。

还有就是自己工作上的一些积累。有时候会碰到一些很特殊的 UI 或什么的，可能有很多人会觉得这个 UI 太难了，就不做了，或者直接切张图，但是我的话，会尽量地想办法用代码来实现它。这也算是督促自己提升 CSS 的一种方式。我大部分时间不一定完全依赖于项目上有什么我才会做，有些东西也需要自己在别的地方积累，因为以后可能会碰到这种情况。

Q：最近最大的感悟是什么？对未来有没有什么规划？

最近 ChatGPT 比较流行，我们公司内部也在做关于这个的一些应用，这个东西比我开始想象中的要强大很多，但是也不至于说完全可以取代我们这些开发者，可能有一部分工作可以让它代替，但不是所有的都可以让它代替，至少我觉得 CSS 它是代替不了的，因为 CSS 太灵活了。

我也试过用 ChatGPT 来写代码， CSS 不太好用，但是 JS 要好用得多，比如用 JS 写一些常用的算法，或者函数，用 ChatGPT 写还是比较方便的。但是这个东西肯定要会用，会用肯定比不会用的人要有优势一些。至于他能做什么，都要看 AI 自己的发展。

关于未来的规划，我应该是会一直做技术的。我领导之前问过我是做技术还是做管理，我说我应该还是会继续做技术。

Q：如果可以重新选择，是否还会选择前端开发？

我在做这个工作的时候，也没想到我会成为一名开发，但是我大概率会选和视觉设计相关的，成为一名 UI 设计师或者什么的。我现在写页面有时候根本都不需要出什么 UI 图，我自己直接写就行了。当然这个跟以前的公司环境有关系，因为以前人比较少，时间比较紧张，产品出个交互稿就直接拿来做页面了。

Q：对于刚入行的前端开发，有什么工作和学习上的建议？

我觉得最关键的还是基础，最基础的 HTML、CSS、JS，前端三大语言。我在社区上面也看到有很多问题，比如一个组件库它的一些样式怎么设置啊，为什么没有生效。像这样的问题其实都是比较基础的，如果基础比较好的话，这种问题会很好解决，大概率就是那些样式被覆盖了，其实就是优先级的问题。很多人可能一上来就直接用那些现在比较成熟的框架，或者说一些 UI 组件库，很多人重置一下里面的样式都觉得非常费劲，或者说根本不起效。像这种问题，其实就是 CSS 基础不牢的原因导致的。

这些基础应该要从平时工作的每一点每一滴开始做。比如在 IDE 里面写一个样式，或者写一个方法啊什么的，很多人可能就直接快捷输入，按一下 Tab 键那个完整的句子就出来了。这样的话写起来可能是稍微快一点，但是在有些情况下，可能根本写不出来。

比如 CSS 有一个渐变的特性，叫 gradient，这个单词我估计至少有一大半的人写不出来，因为大部分情况下就是直接写一个缩写，那个 IDE 里就已经出来了。其实这个也算是一个基础，因为有时候能把它完整地写出来，在很多地方调试起来更加方便。我碰到过一个场景，我之前在上家公司的时候，出了一个问题，代码只能在线上改，完全要自己手写那种，相当于一个记事本一样。这种情况下如果不熟练的话，会非常难改。或者说，如果都非常熟练了，以后就算不用缩写，也根本影响不了代码的效率。

所以我的建议就是不要太过于依赖那些工具。还有一个，业界有一个说法，就是很多人脱离了 Vue 或者 React 就完全不会写页面了，其实我感觉这个是一个比较可怕的事情。因为说到底那些只是框架，可能过两年又会更新迭代，但是那些基础的话，它完全不会被取代，比如原生的一些样式或者方法，它是不会变的，只会不断地往上面加，但是以前的东西它不会减。

Q：在思否社区最大的收获是什么？

我最早知道这个网站的时候，可能是以前在搜什么问题的时候发现了这个网站，后来就自己在上面提问，再后来就是在上面回答，再后面就是在上面写文章，大概就是这样的一个过程。

我每天基本上会花一部分时间在上面，就是看那些问答题目，如果有一些问题我以前碰到过，或者自己很清楚怎么解决，我就会马上回答一下，这也算是一种学习。

再一个可能就是很多人是通过思否才认识到我的，才知道我，也相当于是提升了一下自己的一些影响力。

小编有话说

“我以为我是做设计的，结果发现我是做前端的”，听起来像是被骗了，但在这样的偶然下，依然能找到自己所热爱的东西，并为之努力、坚持。很多开发者都会面临将来是做技术还是做管理的困惑，可以说各有利弊难以抉择，但对 XboxYan 来说，这似乎是一个不需要太纠结的问题，做自己喜欢的事就好。

《思否有约》记录你与编程的故事。欢迎小伙伴们加入访谈，共同分享成长之路，扫描下方二维码报名吧～