CSS入门后，我从前端到全栈 | JTalk大前端

「Jtalk大前端」做者专访旨在推广掘金优质的大前端做者和他们的优质内容，让优质的做者和内容被更多的看见。

第一期「Jtalk大前端」做者专访，咱们邀请的掘金做者是 JowayYoung（掘金主页 juejin.cn/user/233062… ），CSS 技术领域的专家，也是掘金小册《玩转 CSS 艺术之美》的做者。

自我介绍

主要经历，擅长/关注领域，什么时候开始学习前端，何种契机开始接触前端；为什么是前端，为什么是CSS开始，CSS迷人之处在于哪？

你们好，我是JowayYoung，就任于网易集团互动娱乐事业群，深耕前端领域多年，擅长HTML/CSS/JS/Web/Node、网络通信、框架原理、工程架构、性能优化和设计模式等。平常喜欢学习与分享，常常会开发一些小工具提升工做效率和改善生活质量。

很荣幸收到可爱美的小册姐姐的邀请，作了一次简而精的访谈。2016年12月，在同部门一位测试小姐姐的热情推荐下，我注册了掘金帐号，此刻我应该算是掘金第一批用户，见证着掘金从零到一成长到如今。如今的掘金往着愈来愈高的方向发展，也是咱们这些老掘友所期待与但愿的。

注册掘金帐号后我一直潜水，天天学习着各位前端大佬的文章。如下是五年多时间在掘金里所阅读的文章数量。固然每一篇文章我都会细心阅读，好的文章都会进收藏夹并作好相关笔记，不是吃灰那种！

通过两年多的潜水积累，在提高自身能力的同时也想着尝试写一篇文章，终于在2019年正式发表了第一篇技术文章《灵活运用JS开发技巧》。后续每次更新文章的周期不是很频繁，由于每写一篇文章我都会投入不少精力，少则两个礼拜多则两个月。

曾经的我是一位医学生，没错，大学白读了。也许与许多非科班同窗同样，从其余行业转行到互联网行业是一件异常困难的事情。因为大学时期参加过两次学校网站设计大赛并得奖，因此对网站设计产生了浓厚兴趣，在选修课老师的指导下自学了Photoshop和Dreamweaver。有了UI基础后就开始从编码下手，种类繁多的编程语言实在让我眼花缭乱无从下手。PHP从入门到放弃用了7天，ASP从入门到放弃用了1天，Java从入门到放弃用了3天。

在一次与师兄的交流下认识了CSS，CSS的简单便捷让我以为它是打开编程世界的入门钥匙。严格来讲CSS不是编程语言，而是一门与HTML同样的标记语言，但其在浏览器下就能直接运行让我充分意识到入门前端如此简单。没错，入门前端只需会HTML+CSS+浏览器，相对其余编程领域来讲，前端真的可认为是零基础都能转行的岗位。所以不少读者或朋友想转行编程，我都会推荐TA首选前端。

在入门那段时间，从天天强行记忆临床医学、解剖学、病理学、生理学、心理学的骨头、血管、神经到天天强行记忆HTML各类标签、CSS各类属性、JS各类API。整个过程既艰苦又快乐，编码带来的思惟提高远比其余想达到的目标更爽，因此我很享受编码带来的乐趣，由于整我的的思惟都变得敏锐和有条理性。

从前端到全栈

如今你已经是一名全栈工程师，你以为前端走向全栈是趋势吗？从前端到全栈，你以为难吗？你是怎么一步步转变的？

从业多年，经历了前端从简单的网页效果发展到复杂的跨端应用，在将来日子里，前端走向全栈是必然的趋势。若获得更多开发者助力，相信前端能在更短期内达到该趋势。

曾经的JavaScript只是做为丰富网页效果的脚本语言，经过植入预设逻辑就能让网页生动地动起来，提高用户体验。JavaScript自1995年诞生以来，我以为有六种前端技术让前端在短期内产生了从量变到质变的跳跃。

• AJAX(2005年)：无需刷新即快速动态更新局部网页的Web开发技术
• Jquery(2006年)：提供简便JS设计模式且优化DOM操做、语言加强、事件处理、动画设计和AJAX交互的JS框架
• Angular(2009年)：提供MVC、模块化、双向绑定、依赖注入和语义标签的JS框架
• Node(2009年)：基于Chrome V8引擎使用事件驱动、非阻塞式I/O模型让JS运行在服务端的JS运行环境
• React(2013年)：采用声明范式轻松描述应用，经过对虚拟DOM最大限度减小与DOM交互的JS框架
• Serverless(2015年)：无需服务器管理应用程序的构建和运行的概念

基于上述六种前端技术，我将前端发展历程划分为如下阶段。每种前端技术都为当前阶段提供了推动做用，将前端从一个层次推升到另外一个层次。每种前端技术在出现时均可能不受重视，随着时间推移与项目实践，它可能从众多技术中突围而出，所以咱们需保持学习热情，时刻关注新生技术，同时要有包容心，每种技术的出现必有可用之处，不然就不会出现了。

学习前端的历程可用如下场景形容😂！我以为该图很形象地描述了包括我在内不少前端工程师的学习之路，翻过一个山头还有一个山头在等着咱们。

但从前端到全栈，也许需花费两三年时间。若能制定一份学习导向图并遵循着某个方向走，我相信从前端到全栈所花费的时间会更少。首先我对全栈的定义是在拥有必定前端开发经验的前提上有更高级别的工程架构能力和跨端开发能力，若HTML+CSS+JS基础扎实，相信这不是问题，差的就是方向与路线。

JavaScript相比其余语言的通用性会更强，所以出现不少渗透领域的优秀框架和运行环境，基于这些框架和环境，咱们可将JavaScript开发的应用部署到对应的平台上完成更多未知的事情。所以可尝试在熟悉Web开发的状况下慢慢转向Node开发。有了Node开发，咱们从只会网站开发可扩展到服务端开发甚至桌面端开发和移动端开发等更多其余领域。

就像React和Vue同样，正是虚拟DOM可做为兼容层对接原生端或将自身渲染到其余平台，才有了一些对应自身的跨端框架。React在移动端上有React Native在服务端上有next，Vue在移动端上有Weex在服务端上有Nuxt。在充分具有React/Vue开发经验时，可在这些衍生跨端框架的帮助下慢慢过渡到其余领域。固然这只是一个学习的方向，每一个人都有适合本身的学习方法，在此就很少说本身的学习方法了，如下我整理一份以本身经历为主的从前端到全栈过渡的学习路线。

这几年来都是按照上图从左到右慢慢过渡，固然可能会遗漏一些未记录在里面的方向，毕竟前端发展太快，本身也一直在学习，但总体方向基本已完善。

简括CSS

若是让你用一句话归纳CSS，你会怎么说？

若让我用一句话归纳CSS，那么从两方面说。正经一点，套用蜘蛛侠电影里的名言就是能力越大责任越大。顽皮一点，CSS就是网页版的亚洲四大邪术集合体(中国修图术、韩国整容术、日本化妆术、泰国变性术)。

简单来讲就是，重视CSS能把CSS玩转到脱离工做之外的内容，轻视CSS只能写写常规样式用用第三方框架。所以CSS就是毕加索手中的画笔，用得好很差就看你本身。

以为CSS简单的同窗，可能不少场景都是使用UI框架开发，在开发过程当中基本不会考虑如何编写好CSS或重构CSS，在遇到与需求有出入的状况顶多就使用样式覆盖的方式暴力解决。以为CSS困难的同窗，大多数状况是依据设计师提供的设计图还原切片图层，需考虑不少设计规范的问题，甚至一套样式规范应用到各类屏幕上，增长了CSS在适配上的难度。

至今已不少同窗忽略了CSS的重要性，CSS做为一门标记语言，甚至可认为是前端的入门钥匙，它带给咱们不只是用来写写样式那么简单，而更可能是它背后隐藏的秘密与技巧。因此我在2020年花了半年私人时间写了一本掘金小册《玩转CSS的艺术之美》阐释我对CSS的见解与思考，但愿能将这门入门前端的语言发扬光大，让你们对它另眼相看。个人CodePen主页就是我热爱CSS的最好证实，毕竟CSS让我有了兴趣有了工做有了方向有了目标。

CSS学习建议

CSS可算是前端入门技术，有何建议给到刚开始学CSS的同窗吗？怎么开始，特别关注什么，有什么高效方法吗？

在访谈里我一直强调CSS由于简单易用而很适合入门前端。基于本身之前盲目学习走了不少弯路，如今回过神发现其可有更好的方法去学习CSS。仍是那句，学习方法只有适合本身的，但学习路线可适合更多人。

在此，我基于以前写的掘金小册《玩转CSS的艺术之美》整理了CSS里最重要的内容，以思惟导图的形式展现。不知为什么，我最近很喜欢画思惟导图。

深刻学习CSS可结合上图与《玩转CSS的艺术之美》一块儿学习，效果会更佳。只有不断尝试使用CSS作一些有趣的事情，才能让本身保持对CSS的兴趣。另外，你们可多关注CodePen这个网站，里面有不少意想不到的CSS Demo，每学习一个CSS Demo都能找到有趣的点，对提高本身的CSS编码能力有极大帮助。

善用工具也是一个很好的学习习惯，如下是我常用到有关CSS技术的工具。每一个工具都有本身的特点，相信在进阶CSS的过程当中能帮上大忙。

• CodePen：代码演示
• Caniuse：浏览器兼容性
• CssTriggers：CSS触发
• CubicBezier：贝塞尔曲线
• Flexbox：Flex布局
• StatCounter：浏览器统计

另外，关注一些热衷于研究CSS的做者对本身学习CSS也有必定帮助，毕竟他们都会按期分享一些有趣的CSS技术文章。

• 张鑫旭
• Chokcoco
• 我-JowayYoung

最后作一个小小的CSS学习总结：不搞IExplorer兼容，就无兼容问题。不是开玩笑的，我是来真的😬！

• 掌握CSS核心知识点：盒模型、格式化上下文、文档流、优先级别、布局方式
• 善于使用辅助工具，例如一些图形化工具能帮助咱们更好地理解CSS的某些属性与使用场景
• 关注热衷于研究CSS的做者，多与你们一块儿交流CSS
• 在CodePen上注册一个帐号，关注更多有趣的CSS Demo，遇到喜欢的效果立马收藏再学习
• 拒绝兼容IExplorer，只有广大开发者助力才能完全抛弃万恶的IExplorer

前端学习建议

在学习CSS过程当中遇到过什么难点，你当时是怎么解决的，可给到你们一些参考和建议吗？平时本身是怎么学习和提高的呢？

开始学习前若决定自学，会发现互联网上充斥着各类资料和课程，不少都是在现阶段并不能彻底理解的资料和课程。重要是开始前，需制定一个有计划性和有结构性的学习路线，从而避免由于资料和课程的方向不对，又改变学习路线这种浪费时间的状况存在。例如上述我整理的学习路线，有一个明确的方向才能确保在正确的时间作正确的事情。

做为一位码农，必须注册一个GitHub帐号。做为全球最大的基友交流网站，在里面能发现不少牛人和项目，这些都是在学习路途里重要的添加剂，能在某些时候将本身的技术水平推动到一个全新的层次。若本身有不错的项目可发布到GitHub上，让全世界程序猿围观。

接下来我作几点建议，很适用前端初学者和进阶者。

选择一个在行业里比较具有导向性的网站做为学习基地。文章类型网站首选掘金，视频类型网站首选慕课。这多是你前期的主要学习途径，可以规避盲目寻找资料和课程而浪费时间，为之后学习提供了一个良好的学习环境和学习基础。

上机操做，上机操做，上机操做，重要事情只说三遍。所谓只学习不练习的人都是在耍流氓。学习之余尽可能让本身尽量地多练习，让本身更好地掌握所学知识，天天进步一点点，时间会让你知道，你会变得多么优秀。不少读者常常问我，进阶到高级前端需多久，这个就看人了。努力一点一两年就行，懒惰一点十年都未必行。

当积累必定经验后，可为本身寻找一个特定场景，利用所学前端技术作一个在真实开发场景下的项目，目的就是巩固和提示所学知识。固然还可发布到Guthub上，让全世界程序猿围观。毕竟好的项目须要推广，整个过程还可能获得不一样人的指导或建议，真的会受益不浅。

最后就是在业余时间可将本身所学知识和所得经验写成文章并发布到技术社区。此时掘金就为咱们提供了这个平台，不一样层次的前端开发者都在这里分享他们的知识，你天然而然能够在这里找到进步灵感和将来方向。曾经个人也是一名潜水者，现在能根据思路写出一篇完整且能帮助到他人的文章，既温故知新也助人为乐，这就是分享的乐趣。

坚持写做

你怎么看待技术写做，为什么会持续稳定的技术写做，可分享下心得吗？最后，你想对咱们的读者同窗说些啥呢？坚持学习？坚持写做？或者你最近关注的领域学习心得。

做为一名合格的程序猿，当技术积累到必定程度时，经过博客的形式将本身所学所得展现出来，会是一件多重收获的事情。技术写做可能比初中高中写做要稍简单一些，毕竟选题自定。

不知不觉我已坚持了2年的技术写做，无论是学习笔记、我的博客，仍是内部分享，我都会尽本身最大努力作好，每一次技术写做都意味着温故知新。若能坚持技术写做，我以为能收获如下几方面。

• 坚持技术写做能让头脑和思惟更敏捷更有条理性
• 坚持技术写做能发展到对待任何事物都会有快速分析得知有用信息的效果
• 坚持技术写做技既能温故知新也能帮助他人，一箭双雕
• 坚持技术写做能广交同行，认识更多不一样层级的大佬，对本身进阶帮助更大
• 坚持技术写做能让本身更自律更自信，对待文字更敏感

曾经的我很怕技术写做，由于写一篇文章真的不容易。刚开始技术写做遇到的第一个问题就是无从下笔，这个无从下笔多是选题犹豫不决或总体思路不够清晰。每每是这个问题致使不少人在第一步就放弃技术写做，因此为什么技术社区永远都是读者比做者多。而解决这个问题就需把选题和总体思路两个重点解决。

首先是选题，打开掘金的标签管理，会发现100多个标签。这么多标签，怎样选题呢。这个问题我思考过好久，因此我将这些标签归为如下十四大类。

这样选题方向就明确了。例如选择CSS，那么咱们可写盒模型、经常使用布局方式、水平垂直居中方式等话题。例如选择框架原理，那么咱们可写React/Vue开发经验、React/Vue源码阅读、React/Vue运行机制等话题。选择一个想写的话题就已完成第一步了。可从上述大方向肯定技术文章方向，再肯定你擅长的话题。

第二步就是确认文章总体思路。我将一篇技术文章的总体思路归类为如下几点且按照顺序排版。

• 前言：一般以话题的技术背景为主，通常是引出在未使用该技术前的背景，可分析该背景的一些缺点或劣势，进而慢慢铺垫出你要表达的话题；
• 分析：一般基于现状分析话题的优势或优点，可列举一些成功案例加以印证话题的可靠度，或经过一些使用场景说明话题的通用性；
• 编码：做为文章主体最重要的部分，也是技术文章里承上启下的部分，经过展示一些核心代码并添加解析，分析为什么这样处理，为什么这样封装，为什么这样使用；
• 步骤：该点无关紧要，是编码的一项补充，若话题总体编码量较多可经过分步说明，增长更多细节为读者解读，对升华技术文章有必定的做用；
• 示例：目的是帮助读者了解话题所表达的实际使用场景，一项技术是否普及需必定的实际使用场景支持，经过示例拉近读者对话题的感觉；
• 疑问：话题所引伸的技术无论如何高超确定会存在疑难杂症，需填坑挖坑，这个过程很重要，若推广话题能顺便将话题里产生的坑填了，相信更多读者会认同话题的可靠性；
• 总结：全文最重要的一点，话题的展开需总结性地收尾，总结话题能让话题的总体性提高更高的层次，以几点总结性的话归纳读了本文的收获是什么，学到什么。

以我发表的这篇《嗯，手搓一个TinyPng压缩图片的WebpackPlugin也SoEasy啦》为例，个人目的就是输出一篇如何写好webpack扩展器的教程。依据上述技巧，可一步一步延伸出整篇文章所表达的话题。发现掘金大部分文章都是以这样的形式写做，若能勇敢迈出第一步，相信你在不久的未来也能输出更多高质量文章，输出技术文章，既温故知新也助人为乐，这就是分享的乐趣。

福利到

第一期「Jtalk大前端」做者专访内容就是这些啦

你们有问题能够在评论区留言

会召唤做者来回答你们的提问哦

另外送一个福利🎉🎉🎉

评论区抽一个掘友送一个 掘金新款追边T恤

若是你也是前端学习者

扫码回复 “前端”进掘金前端做者群

另外转发文章到朋友圈截图发给掘金酱

还能够领取 《玩转CSS艺术之美》小册

五折优惠码✌✌✌

欢迎大前端优质做者带上本身的掘金主页自荐

下一期再见👋