提高网页开发人员效率的 8 种方法
制作网站需要时间。要想创建一个优质、稳定的网站，你需要考虑很多方面，有时你会觉得根本没有办法加快速度。无论你是独自工作还是与设计师和后端开发人员团队合作，都有很多方法可以提高效率。
许多人和公司都会犯一个错误，那就是试图将产品标准化。他们只基于单一的 WordPress 主题进行开发，或者所有网站都采用相同的功能。然而，如果你想服务大型客户，他们几乎从不接受标准化的产品。他们更需要根据自身需求量身定制的解决方案。这样的工作更有趣、更具挑战性，也更有价值。但这同时也意味着你无法将产品标准化。
你无法（也不应该）将产品标准化，但你可以将流程标准化。作为一名拥有超过 15 年经验的前端开发主管，我花了很多时间思考如何优化流程配置。如果你有意识地进行优化，就能在流程的各个环节显著提升效率。以下是 8 种方法，涵盖项目从开始到结束的各个阶段：
- 从坚实的基础开始
- 就设计捷径达成一致
- 使用交接工具
- 使用 CSS 框架
- 重复使用你的组件
- 使用埃米特
- 使用聚乙烯薄膜
- 设置自动化质量检查
从坚实的基础开始
如果每次都从零开始，速度肯定不会比上次快。但如果为网站搭建一个坚实的基础，就能节省每次都要花费的时间。
后端开发人员对此早已心知肚明。许多人会选择基于自己选择的语言和框架来创建初始项目，而不是使用现成的内容管理系统 (CMS)。CMS 通常功能有限，只能按照其预设的方式使用；而框架则更像是一个包含各种构建模块的大盒子，您可以根据当前项目的具体需求灵活组合这些模块。这种理念同样适用于前端开发。
看看最近的几个项目，找出哪些 HTML 代码是相似的。每个网站都会包含大致相同的元素：总会有一个<head>包含标题、网站图标、OpenGraph 信息以及指向 CSS 和 JS 文件的链接的 <head> 标签。99% 的网站都会有一个包含徽标和导航的头部，一个包含版权声明和一些其他链接的底部，而且大多数页面都会有一个用于 CMS 的内容区域。将这些元素添加到你的“初始”或“基础”HTML 代码中，可以节省你大量的时间。
此外，虽然我们大多数人都喜欢尝试新的 JavaScript 框架，但对于入门来说，一些简单的 JavaScript 代码片段就足够了。跨平台 JavaScript 比几年前容易得多，大多数问题都可以用简单的“原生”脚本解决。
就设计捷径达成一致
设计工具让设计师能够访问所有宽度、所有颜色和所有字体大小。但实际上，您的网站只会用到其中几种。您可以通过制定一些基本规则，而不是偷工减料，来节省设计和实施过程中的时间。
这可能非常庞大，例如通过创建一个完整的设计系统，就像即将发布的Modulz 一样，其中所有可用的设计元素和变体都是预先设计好的，并由实际代码生成。虽然前期需要花费更多时间，但最终得到的是一个可以快速设计和构建的系统，而且通常可以同时进行。
但设计捷径也可以非常简单：让你的团队就一套设计捷径达成一致，并将这些捷径应用于设计的每个部分。
例如，您可以为每个设计元素设定一套可重复使用的边距（例如 8px/16px/32px/64px），这样设计师就无需担心所有边距是否都精确到 64px，而不是 63px（或者更糟，63.47845px，真是要感谢 Sketch！）。反过来，作为网页开发者，您也无需浪费时间询问设计师这次是否真的打算使用 60px，还是应该像其他所有元素一样使用 64px。字体大小甚至颜色也可以采用同样的方法。
这种简单、低技术的沟通方式可以为你节省数小时的（重新）开发时间。如果你已经就所有可能的边距达成一致，并且任何使用略微不同边距的设计元素都可以直接使用最接近的对应值，那么你就无需与设计师进行任何像素级的繁琐调整。或者至少可以大大减少这些工作。
当然，这并不意味着设计中绝对不能使用不同的边距，但设计师会在设计文件中明确指出任何例外情况。
使用交接工具
直接在设计文件中工作很容易出问题。不仅可能在不知不觉中移动用户界面元素，而且该界面的设计初衷是用于创建设计，而不是将其拆解后重新应用到其他地方。为此，需要使用交付工具。
它们会根据设计稿打造一个独特的界面，专注于前端开发人员的实际工作。我们比较喜欢Avocode、Zeplin和Marvel，但像 XD、Figma 和 Sketch 这样的设计工具现在也都包含了各自的交付模式。
和你的设计师一起熟悉这些工具，这样他们就能学习如何以最佳方式为这些工具准备设计文件，而你作为开发人员也能学习如何最有效地使用这些工具。
使用 CSS 框架
首先我想说，我不太喜欢 CSS 框架。大多数框架体积庞大、运行缓慢、遗留问题严重且限制过多，而且没有提供好的默认设置；即使有，通常也是别人的默认设置，可能并不适合你和你的情况（比如 Material Design）。
但。
有一些有趣的新框架可能适合你：
Bulma是一个专为现代浏览器打造的“下一代”CSS框架，因此它的代码库更简洁、更小巧，易于定制，并且提供了一些美观的默认样式。我亲眼见证了它在生产环境中的出色表现。
Tailwind——先提醒一句，你第一次看到它的时候可能会很讨厌它（我一开始也是）。它的诀窍在于将样式编写从 CSS 转移到了类名。每种样式（颜色、边距等等）都有自己的类，所以即使你只能使用几个固定的类，你的网站也能始终保持一致。你可以选择使用默认设置，也可以自定义设置。
如果你能接受只能用类来定义样式这一点，那么用它开发会变得非常非常快。例如，Polypane 管理控制台就是用它编写的。如果你想看看你的设计能有多么多样化，以及实现起来会是什么样子，我推荐使用Tailwind Toolbox。
重复使用你的组件
虽然市面上有很多优秀、快速、易用且响应迅速的组件，但很难找到完全符合你和团队工作方式的组件，因此你往往最终会选择自己创建。然而，在不同的项目中，通常有一些 UI 元素和模式可以重复使用。
也许你拥有完美的响应式菜单，或者拥有易于理解的错误处理和炫酷动画的完美联系表单。
将这些组件记录下来，以便您能轻松地在每个新项目中实现它们。随着时间的推移，它们会不断发展，您也会添加新功能。如果添加了新功能，请务必更新您的参考组件。否则，您仍然需要在旧项目中费力地查找特定版本的组件。
使用埃米特
虽然任何文本编辑器或集成开发环境 (IDE) 都支持代码片段（可以用它们来编写我们刚才提到的可重用组件），但使用Emmet可以节省大量时间。它几乎适用于所有文本编辑器和 IDE。
Emmet 的概念很简单：如果通过编写 CSS 选择器来创建 HTML 会怎么样？Emmet 文档中是这样描述的：
这个缩写：
#page>div.logo+ul#navigation>li*5>a{Item $}
可以转化为
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
只需一个简单的“展开”快捷键即可。很明显，这两种写法哪种更快，而且作为前端开发人员，您已经熟悉 CSS，因此只需学习很少的内容就能获得如此巨大的速度提升。
就像 Polypane 可以帮你省去调整大小和重新加载的时间一样，Emmet 也可以帮你省去打字的时间。
使用聚乙烯薄膜
别以为我会漏掉这一点，对吧？平均而言，Polypane能为团队节省大约 60% 的开发时间。我知道这听起来难以置信，但这是实际观察到的数据。简单来说，如果你把开发过程中调整浏览器窗口大小所花费的时间加起来，你会发现这相当可观。而且，你肯定不会每个页面只调整一次窗口大小。在 Polypane 中，由于所有断点都并排显示，因此无需再进行调整。如果你将其用于 QA 测试，则可以大幅缩短测试时间，因为你需要管理的设备数量会大大减少。更多内容将在后续文章中介绍。
Polypane 的优势不仅在于无需调整大小即可节省时间，它还拥有许多其他工具，可以提高开发人员的工作效率，例如内置的实时重载功能，无需刷新页面；以及各种叠加层，可以突出显示对比度问题，甚至实时运行视觉障碍模拟器。
如果你还没用过 Polypane，我建议你统计一下一天之内你调整浏览器窗口大小的次数。然后去试试 Polypane 吧。
但更重要的是，当你搭建网站并同时查看所有屏幕尺寸时，问题就能更快地被发现（通常是在问题发生之前），从而降低每页加载时间。初始部署后，你需要做的修复工作就更少了。随着时间的推移，你会在第一次部署时就自动考虑到这些修复，从而节省更多时间。
这项优势非常显著：它还意味着项目发布后出现的问题会大大减少。对于网站开发团队来说，修复几个月前就已完成的项目上的 bug 是最浪费时间的事情。试想一下，如果仅仅为了修复一个问题，就无需下载数据库和静态文件，也无需在本地计算机上重新搭建一个旧项目，那该有多方便。
设置自动化质量检查
你可以时不时地手动检查正在开发中的网站，但像 Lighthouse 和 Webhint 这样的质量测试工具通常需要一段时间才能运行完毕。理想情况下，你肯定不想等待它们完成。因此，与其手动运行测试，不如将它们融入到你的开发流程中。例如，使用lighthouse-ci和webhint 的 CI 集成，自动检查每个 PR 。这样，你就能随时掌握项目的质量状况，而无需浪费时间等待测试完成。
有什么建议吗？
以上是我提高网页开发人员效率的一些建议。如果您有其他建议，欢迎提出！
请在推特上联系我（@polypane或@kilianvalkhof），或者发邮件给我：kilian@polypane.app，我会将他们添加到这篇文章中。
文章来源：https://dev.to/polypane/8-ways-to-increase-your-productivity-as-a-web-developer-3871