[译] 前端攻略-从路人甲到英雄无敌

   <p>译者的废话，不感兴趣的直接忽略</p>    <p>前两天才翻译了一篇文章：解决你的前端面试，这类型的文章都是关于前端的一些基础知识的，不过文章里的链接都是外文资料，更多的会学习的是思想吧和知识点列表。对于前端，或者更广泛的说的客户端开发的知识点图谱还是推荐下这个。笔者打算先写完 <a href="/misc/goto?guid=4959675596130478272" rel="nofollow,noindex">React+Redux+Webpack的系列笔记和实战</a> 然后就把这些学习链接看看整理找一些中文的或者自己整理一些放出来，不过估计应该也有大神写了现成的，欢迎分享给我。</p>    <p>记得那年，我初学前端，遇见了很多的文章，在浩瀚的知识海洋里我手足无措，不知从何开始。己所不欲，勿施于人。这篇文章就会帮你去遨游前端学习的海洋，主要包含了在我之前的学习过程中整理的一些资源和一些感悟。我打算将整篇文章切分为两部分，第一部分重温HTML与CSS的基本知识，第二部分概括JavaScript、前端框架与设计模式。</p>    <h2>HTML 与 CSS基础</h2>    <p>前端的领域里，任何东西都离不开 <a href="/misc/goto?guid=4959675596242244053" rel="nofollow,noindex">HTML</a> 与 <a href="/misc/goto?guid=4959675596357456153" rel="nofollow,noindex">CSS</a> 。HTML与CSS基本上控制了你看到的所有东西，HTML用来定义内容而CSS负责样式与布局。</p>    <p><img src="https://simg.open-open.com/show/02dd75c735495c7d4df98f77bbcb51ce.gif"></p>    <p>首先从 <a href="/misc/goto?guid=4959675596472491628" rel="nofollow,noindex">HTML</a> 以及 <a href="/misc/goto?guid=4959675596580661188" rel="nofollow,noindex">CSS</a> 开始，这里推荐的是MDN的官方指南。MDN对于重要的HTML与CSS内容进行了详细条理的阐述，除此之外，每一章都是单独的一页，提供了在CodePen与JSFiddle展示的Demo。</p>    <p>看完了这些基础教程之后，可以来看看由CodeAcademy提供的t <a href="/misc/goto?guid=4959675596673491049" rel="nofollow,noindex">Make a Website</a> 系列课程。这个课程只要几个小时就能看完，如果你想要更多的锻炼，可以瞅瞅 <a href="/misc/goto?guid=4958847970239187571" rel="nofollow,noindex">CSS Diner</a> ，这是一个CSS挑战的小游戏。</p>    <p>最后，可以看看怎么使用 <a href="/misc/goto?guid=4958854482887901106" rel="nofollow,noindex">Google Fonts</a> ，参考下 CSSTricks出的 <a href="/misc/goto?guid=4959675596841053608" rel="nofollow,noindex">Basics of Google Font API</a> 。</p>    <p>国内用不了Google Fonts的话可以参考下FontAwesome，如果你要用中文字体的话建议参考FontSpider，请自行Github搜索。</p>    <p>Typography--排版也是个构建界面时候很重要的部分，有时间的话推荐你看看Donny Truong写的 <a href="/misc/goto?guid=4959675596926827661" rel="nofollow,noindex">Professional Web Typography</a> 这本书，它会教你基本上关于排版的所有东西。在学习这些的时候不要太担心自己会忘了，反正记不住。你应该着重于记录这些并且理解HTML和CSS是怎么工作的。</p>    <h2>Practicing HTML and CSS Basics</h2>    <p>到这里你应该已经明白了HTML与CSS的基本使用，下面我们要学以致用了。这一部分就设计了两个小实验来让你自己动手构建网站与界面。我是把它们形容成实验，所以不要害怕失败。</p>    <h3>Experiment 1</h3>    <p>第一个实验里，我们用的是 <a href="/misc/goto?guid=4958539547061522984" rel="nofollow,noindex">CodePen</a> ，一个在线的HTML与CSS实验台。同时也提供了实时预览功能，一石二鸟呦。好了，下面我们要看看我们做的界面的原型了，转到 <a href="/misc/goto?guid=4958854483414499132" rel="nofollow,noindex">Dribbble</a> 吧, 这嘎达可全是设计创意啊。</p>    <p>我是看上了这个系列： <a href="/misc/goto?guid=4959675597081088333" rel="nofollow,noindex">1</a> , <a href="/misc/goto?guid=4959675597173511964" rel="nofollow,noindex">2</a> , <a href="/misc/goto?guid=4959675597256731864" rel="nofollow,noindex">3</a> , <a href="/misc/goto?guid=4959675597338868101" rel="nofollow,noindex">4</a> , 以及 <a href="/misc/goto?guid=4959675597432190430" rel="nofollow,noindex">5</a> .。我选择了一个移动优先的设计是因为与桌面设计相比更简单一点，不过你也可以自己找一个。</p>    <p><img src="https://simg.open-open.com/show/339af400f9d367a673b3f9fb422f38d9.png"></p>    <p>在你选定了设计之后，就可以在CodePen上面开始动手了。你也可以看看其他人设计的Pen： <a href="/misc/goto?guid=4959675597508002805" rel="nofollow,noindex">pens on CodePen</a> . 另外，别忘了 <a href="/misc/goto?guid=4958188962313964239" rel="nofollow,noindex">StackOverflow</a> ，这可是你的小伙伴呦。如果你最后实现的东西跟设计相去甚远，也不要灰心，不断尝试总会提高的。</p>    <h3>Experiment 2</h3>    <p>经过实验一估计你已经有点自信了，在实验二里面我们将会先借鉴一些大公司的经典站点。有不少站点会用一些CSS框架或者混淆它们的CSS类名，这会让源代码的阅读比较麻烦，这嘎达我列举了几个源代码可读性比较好的：</p>    <ul>     <li> <p><a href="/misc/goto?guid=4959675597644068467" rel="nofollow,noindex">Dropbox for Business</a> : Try replicating their <a href="/misc/goto?guid=4959675597725555307" rel="nofollow,noindex">hero</a> section</p> </li>     <li> <p><a href="/misc/goto?guid=4958877194746930068" rel="nofollow,noindex">AirBnB</a> : Try replicating their footer</p> </li>     <li> <p><a href="/misc/goto?guid=4959675597837129215" rel="nofollow,noindex">PayPal</a> : Try replicating their navigation bar</p> </li>     <li> <p><a href="/misc/goto?guid=4958533306290732445" rel="nofollow,noindex">Invision</a> : Try replicating their signup section at the bottom of the page</p> </li>     <li> <p><a href="/misc/goto?guid=4959675597954670159" rel="nofollow,noindex">Stripe</a> : Try replicating their payments section</p> </li>    </ul>    <p>再次强调下，实验二的目的并不是让你去重构整个页面，而是知道怎么去分割组件以及人家是怎么做的。如果你没有设计的背景，可能你要好好发掘下你的潜能了。一个优秀的前端开发者要能够辨别好的设计然后完美地重现它们，可以参考下我的这篇文章： <a href="/misc/goto?guid=4959675598038450161" rel="nofollow,noindex">develop your design eye</a> .</p>    <p><img src="https://simg.open-open.com/show/e964c6c24d83f60b9843cb0a34193c81.png"></p>    <p>你可以选择在线编程： <a href="/misc/goto?guid=4958539547061522984" rel="nofollow,noindex">CodePen</a> 或者直接本地开发。如果你选择本地做，那你可以使用这个 <a href="/misc/goto?guid=4959675598133274687" rel="nofollow,noindex">模板项目</a> 。我推荐是使用 <a href="/misc/goto?guid=4958832861167207492" rel="nofollow,noindex">Atom</a> 或者 <a href="/misc/goto?guid=4959675598248171382" rel="nofollow,noindex">Sublime</a> 这样的编辑器。另外，对于Firefox或者Chrome自带的控制台与开发者工具也要好好瞅瞅。</p>    <h2>HTML and CSS Best Practices</h2>    <p>好了，现在你已经能够用HTML与CSS做一些简单的事情了，下面就要看看所谓的最佳实践了。最佳实践实际上就是一系列的在日常开发中总结出来的约定俗成的规范的集合，来让你更快地开发与构建更高质量的代码。</p>    <h3>Semantic Markup:语义标记</h3>    <p>HTML与CSS最佳实践中重要的一条就是怎么来写出有语义可读性的标记。好的语义即是你使用了合适的HTML标签与CSS的类名来传达出你想表达的结构含义。</p>    <p>譬如 <em>h1</em> 标签会告诉我们里面包裹的是一些很重要的标题信息，另一个例子就是 <em>footer</em> 标签，会直截了当地跟你说，这里面是包含一些页脚信息。建议你阅读 <a href="/misc/goto?guid=4959675598333502075" rel="nofollow,noindex">A Look Into Proper HTML5 Semantics</a> 以及CSSTricks的 <a href="/misc/goto?guid=4959675598418097231" rel="nofollow,noindex">What Makes For a Semantic Class Name</a> 。</p>    <h3>CSS Naming Conventions</h3>    <p>下面一个比较重要的事情就是怎么给你的CSS定一个合适的类名。好的命名习惯，譬如语义化的标记，可以更好地传达含义，让代码的可读性与可维护性大大增加。你可以瞅瞅 <a href="/misc/goto?guid=4959675598497434499" rel="nofollow,noindex">OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?</a> 这篇文章里提及的CSS的一些命名的习惯。</p>    <p>总体来说，我的建议是跟着你的直觉来确定命名习惯，随着时间的发展你会觉得这样看上去很舒服。如果你要看看大公司，譬如Medium是怎么实践BEM这样的命名规范的，可以阅读 <a href="/misc/goto?guid=4959675598583037029" rel="nofollow,noindex"> Medium’s CSS is actually pretty f <em>*</em> ing good </a> 这篇文章，在这里你会学到怎么在一个快速迭代地情况下也维护你的有效地CSS命名习惯。</p>    <h3>CSS Reset</h3>    <p>不同的浏览器在譬如margin以及line-height这些小的样式点之间存在着一些不一致性，因此你要学会重置你的CSS环境。 <a href="/misc/goto?guid=4959544249229577768" rel="nofollow,noindex">MeyerWeb</a> 就是一个常见的重置手段，如果你想深入了解下，推荐你阅读 <a href="/misc/goto?guid=4959675598705058483" rel="nofollow,noindex">Create Your Own Simple Reset.css File</a> 这篇文章。</p>    <h3>Cross Browser Support</h3>    <p>跨浏览器支持意味着你的代码要去支持绝大部分的现代浏览器，一些常见的CSS属性，譬如 <em>transition</em> 需要 <a href="/misc/goto?guid=4959675598788607415" rel="nofollow,noindex">vendor prefixes</a> 来运行在不同的浏览器中。你可以在 <a href="/misc/goto?guid=4959675598943317733" rel="nofollow,noindex">CSS Vendor Prefixes</a> 这篇文章里获取更多的知识。这就意味着你需要花费更多的时间来在不同的浏览器之间进行测试。</p>    <p><img src="https://simg.open-open.com/show/387cbc97ac1a8a50b03bff0a5791da22.png"></p>    <h3>CSS Preprocessors and Postprocessors</h3>    <p>翻开CSS的历史，自90年代以来，CSS走过了一段漫长而崎岖的道路。整个UI系统变得日益繁复，人们也会去选择使用一些预处理器或者后处理器来管理这种复杂性。CSS的预处理器或者CSS语言的扩展会在无声无息之间提供类似于变量、Mixins以及继承这些特性。最主要的两个CSS的预处理器就是 <a href="/misc/goto?guid=4959668459369841601" rel="nofollow,noindex">Sass</a> 与 <a href="/misc/goto?guid=4958318706716927602" rel="nofollow,noindex">Less</a> 。2016年中Sass被越发广泛地使用，著名的响应式框架BootStrap就是从Less迁移到了Sass。另外，很多人谈到SASS的时候也会提到Scss，你可以参考 <a href="/misc/goto?guid=4959675599096674983" rel="nofollow,noindex">whats-difference-sass-scss</a> 这篇文章。</p>    <p><img src="https://simg.open-open.com/show/3adb7b66e01abee124ce84f106881598.png"></p>    <p>CSS后处理器则对于手写的CSS文件或者经过预编译的CSS文件进行一些处理，以著名的 <a href="/misc/goto?guid=4958962227784913676" rel="nofollow,noindex">PostCSS</a> 为例，它有一个插件可以帮你自动地添加一些渲染前缀。</p>    <p>当你接触过CSS的预处理与后处理器之后，你会把它们提升到日常伴侣的。不过，过犹不及，像变量和Mixins这些特性不能滥用啊，还是应该在合适的地方使用（译者注：此言非常有理）。还是推荐下 <a href="/misc/goto?guid=4959675598583037029" rel="nofollow,noindex"> Medium’s CSS is actually pretty f <em>*</em> ing good </a> 这篇文章。</p>    <h3>Grid Systems and Responsiveness</h3>    <p>网格系统即是用来水平或者垂直地排布元素的CSS架构。</p>    <p><img src="https://simg.open-open.com/show/ea094d21a339b94c2557fed4a45d84cb.png"></p>    <p>著名的网格框架有 <a href="/misc/goto?guid=4958332662969681733" rel="nofollow,noindex">Bootstrap</a> , <a href="/misc/goto?guid=4958863362852966903" rel="nofollow,noindex">Skeleton</a> , 以及 <a href="/misc/goto?guid=4958338175196780124" rel="nofollow,noindex">Foundation</a> ，它们提供了用于在布局中进行行列管理的样式表。这些框架用起来很方便，不过我们也是要理解网格的工作原理，推荐看 <a href="/misc/goto?guid=4959675599390509557" rel="nofollow,noindex">Understanding CSS Grid Systems</a> 以及 <a href="/misc/goto?guid=4959675599491120279" rel="nofollow,noindex">Don’t Overthink Grids</a> 。</p>    <p>网格系统另一个目标就是是你的网站具有响应式特性。响应式意味着你的网站可以根据屏幕的大小来动态调整你网站大小与布局。很多时候这个响应式特性都是基于 <a href="/misc/goto?guid=4959675599574659777" rel="nofollow,noindex">CSS media queries</a> , 即根据不同的屏幕大小选用不同的CSS样式规则。</p>    <p><img src="https://simg.open-open.com/show/0961973779851804e70d537967358a30.gif"></p>    <p>你可以看一下 <a href="/misc/goto?guid=4959675599653341717" rel="nofollow,noindex">Intro to Media Queries</a> 来了解更多。另外，因为我们正在进行一场所谓 <a href="/misc/goto?guid=4959675599740521507" rel="nofollow,noindex">mobile-first</a> 变革，推荐你看下 <a href="/misc/goto?guid=4959675599821127423" rel="nofollow,noindex">An Introduction to Mobile-First Media Queries</a> 。</p>    <h2>Practicing HTML and CSS Best Practices</h2>    <p>恭喜道友，筑基成功，你已经能够了解一些关于HTML与CSS的最佳实践了，下面又到了学以致用的时间。这里的两个实验主要是让你锻炼下编写整洁的代码和保证长期的可读性与可维护性。</p>    <h3>Experiment 3</h3>    <p>实验3中，你需要选一个你之前自己做的项目并且用上文中提及的最佳实践去重构它们，从而保证你的代码更易读并且更简洁。掌握如何有效地重构代码是前端开发者的一个重要技能。当然，写出高质量的代码并非一蹴而就，而是需要一个长期的迭代过程， <a href="/misc/goto?guid=4959675599910003947" rel="nofollow,noindex">CSS Architectures: Refactor Your CSS</a> 这篇文章就是一个不错的学习起点。</p>    <p><img src="https://simg.open-open.com/show/8b8147d2fa17c0d4949d3121efb62da4.png"></p>    <p>当你决定要重构代码之前，你要先扪心自问以下几点</p>    <ul>     <li> <p>你的类名定义是不是模糊不清的，6个月之后你还能否明白你类名的意义。</p> </li>     <li> <p>你的HTML与CSS是否足够语义化，一眼望去是否就能明白你的代码架构与关系意义？</p> </li>     <li> <p>你是否N次的重复使用了相同的颜色代码，别忘了可以用 <a href="/misc/goto?guid=4959675599998914769" rel="nofollow,noindex">Sass variable</a> 。</p> </li>     <li> <p>你的代码是否能够在Safari与Chrome都能正常运行？</p> </li>     <li> <p>能否用像 <a href="/misc/goto?guid=4958863362852966903" rel="nofollow,noindex">Skeleton</a> 这样的网格框架来代替你自己的布局?</p> </li>     <li> <p>你是不是经常使用了 !important ?</p> </li>    </ul>    <h3>Experiment 4</h3>    <p>最后一个实验是一个大杂烩，把前面讲的所有知识都混杂起来。不过要知道的是，上面讲的很多最佳实践在一个草稿或者小型项目里难见分晓，只有在大项目里才能显露峥嵘。</p>    <p>因此，最后一个项目我是建议建立一个自己的作品剪辑网站，作为一个前端开发者，个人网站就是自己的电子名片。这里会展示你的作品与项目的积累，也是一个回溯你发展的进程与开发履历的地方。</p>    <p><img src="https://simg.open-open.com/show/b6b043bed08abf8dc38ddc76674b9daf.jpg"></p>    <p>可以参考Adham Dannaway的文章 <a href="/misc/goto?guid=4959675600096510649" rel="nofollow,noindex">My (Simple) Workflow To Design And Develop A Portfolio Website</a> 来从零开始。</p>    <h2>Stay current</h2>    <p>当HTML与CSS已经是小菜一碟，你就算是进入了前端开发者的殿堂，一个不断发生改变的地方。</p>    <p><img src="https://simg.open-open.com/show/43b110821d91023efe931706ab4e2d9e.jpg"></p>    <p>这里推荐一些博客或者期刊，你可以随时关注：</p>    <ul>     <li> <p><a href="/misc/goto?guid=4959633168860543590" rel="nofollow,noindex">CSSTricks</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959674013244148417" rel="nofollow,noindex">Smashing Magazine</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959675600232958112" rel="nofollow,noindex">Designer News</a></p> </li>     <li> <p><a href="/misc/goto?guid=4958973345490581128" rel="nofollow,noindex">Nettuts+</a></p> </li>     <li> <p><a href="/misc/goto?guid=4958529502180149857" rel="nofollow,noindex">CSS Wizard</a></p> </li>    </ul>    <h2>Learn by example</h2>    <p>最后，一般来说，最好的学习方式呢就是跟着例子来，这里再安利一波别人家的公司的样式与命名规范。</p>    <h3>Styleguides</h3>    <p><img src="https://simg.open-open.com/show/c418ae4a31627d438037ecfcf2b7cb6d.png"></p>    <p> </p>    <p>来自： https://segmentfault.com/a/1190000005174755</p>    <p> </p>