改善开发人员日常生活的三个阶段

介绍

您是否曾因为想到必须从头开始开发每个新项目的所有阶段而感到烦躁，感觉单调乏味的负担压得您喘不过气来？这是开发人员常见的挫败感 - 感觉每个项目都遵循相同的繁琐流程，几乎没有留下任何创造空间。

但是，如果我告诉您有一种方法可以打破这种循环，并将您的 Webflow 开发体验转变为快乐和满足的源泉，您会怎么想？秘诀是使用最佳实践和创新，使您能够将 Webflow 开发工作流程提升到一个新的水平。

在本深入指南中，我们将介绍可用于简化常规开发步骤、克服常见问题以及释放平台全部潜力的技术。因此，系紧安全带，准备进入效率至上的世界。

第一阶段——为成功奠定基础

当您启动新的 Webflow 项目时，需要有一个强大而高效的基础，以便从那里开始扩展。虽然这是一个准备阶段，但开发已经开始，并且有一些重要的要点需要考虑，这些要点将为您取得成功奠定基础。

1.1 风格指南

如果您将样式指南视为项目的蓝图，其首要地位就显而易见了。创建样式指南标志着项目的开始，确保类和样式在整个过程中表现可预测。因此，在深入开发特定页面之前，请花点时间处理样式。创建样式指南有两种方法：

• 根据您的偏好从头开始创建自己的基础项目，或者
• 使用现成的开源框架，例如Finsweet 、 Relume 、 Wizardry或任何其他框架。

1.2 变量

由于 Webflow 的最新更新，使用变量变得更加直观和高效。通过将变量组织成精心设计的组，您可以简化开发并提高效率。我建议考虑创建以下组：

• 常见颜色
• 背景
• 文本
• 字体大小
• 文字大小 移动版
• 容器（最大宽度）
• 图标大小

一旦创建这些组并将其与相应的类关联，您就可以轻松、自信地继续开发网页。

创建变量一直是一种最佳实践，而 Webflow 在低代码开发领域延续了这一传统。这些预定义组为任何项目提供了坚实的基础，使开发过程更加顺畅和结构化。如果客户要求将配色方案从深色改为浅色，你会庆幸自己使用了变量。

1.3 优先考虑无障碍性

可访问性通常留到项目的最后阶段，但其重要性怎么强调也不为过。从项目一开始，可访问性功能集成就应该放在首位，影响您添加的每个决策和元素。

Webflow 已公开提供了一份清单，仔细研究后您将对此事的要点有所了解。

Webflow 的一大优势是其内置的可访问性仪表板，它提供有关视障人士如何看待您的项目的视觉信息。此功能允许您通过多个可访问性过滤器查看您的项目，模拟不同的查看条件并突出显示潜在的改进领域。

这是为了创造一个更加公平和包容的数字环境。通过从一开始就优先考虑可访问性，您不仅可以提高项目的可用性，还可以展示出致力于让所有受众成员（无论他们的能力如何）平等地访问您的项目的承诺。

第二阶段——掌握开发流程

现在您进入了直接按照设计开发所有页面的阶段。以下是一些帮助您顺利完成此阶段的建议：

2.1 自定义代码

“停下来。为什么？为了什么？但这怎么可能？！毕竟，未来已经到来，我们现在为什么需要代码？”——你可能会说。但说实话：即使不了解代码，你也可以开始了解 Web 开发并快速开始你的职业生涯。但保持竞争力并在无代码/低代码平台的简单拖放功能上创造非凡的东西似乎并不是事实。因此，欢迎来到我在上一篇文章中谈到的无尽的开发和学习。

2.1.1 HTML

在 Webflow 等低代码平台上工作时，人们很容易只依赖 div 和文本元素来创建结构。但这就是我们与昨天不同的地方，至少在阅读了我的文章后，我们对成品的质量负责。确保您的标记遵循语义约定，使用 <header>、<nav>、<main>、<aside>、<footer> 等元素，并纠正标题级别以提高清晰度和可访问性。

2.1.2 CSS：

• 在心理上将您未来的所有代码分为全局和本地。将全局 CSS 添加到 Navbar 组件。这样，您就可以从任何页面访问它，并且您还将在发布项目之前看到样式是如何应用的。

• 使用媒体查询在代码中编写悬停状态的样式。此方法可确保悬停位置仅显示在桌面上：

  
  

 <style> @media screen and (hover:hover) { //Insert your code here... } </style>

• 为 1024px 宽的屏幕编写单独的样式，以解决特定于此特定尺寸的设备的独特布局问题。

  虽然在 Webflow 中创建响应式设计很容易，但平板电脑布局的起始宽度为 991 像素。事实证明，1024 屏幕会将所有桌面样式应用于自身。但是，我还没有一个项目不需要为 1024 屏幕单独编写样式。我认为此项是验证的必需项。是否单独注册样式取决于每个单独的项目。

• 在您的 CSS 代码中添加注释以提高可读性并促进与其他开发人员的协作。在后续项目编辑期间，让您自己和其他开发人员的工作更加轻松。如果您从以前的开发人员那里继承了项目，请保留该项目，使其保持您希望看到的样子。

 <style> /* About page Start */ //Insert your code here... /* About page End */ </style>

• 我强烈建议不要仅仅依赖 Webflow 动画，而要使用 CSS 动画来使您的页面更简单、更高效，同时又不影响页面性能。

  Webflow 内置的动画工具使初学者更容易创建具有众多交互的优质网站。但是，如果我们谈论的是高级开发方法，则需要注意的是 CSS 动画非常轻量，并且不会因其存在而减慢页面速度。相反，本质上仅旨在更改元素的 CSS 属性的 webflow 动画通过 JS 工作，从而减慢页面速度。这在小型项目中并不明显，但在大型项目中却很明显。无论如何，我建议您在任何项目中尽可能多地使用 CSS，而不是原生的 Webflow 动画，即使是练习也是如此。我们记得，经过多次重复后，习惯就会形成。让我们养成它。

• 如果不打算让用户与 lottie 动画交互，最好使用 mp4 文件而不是 .json 甚至优化的 .json。Safari 的性能会因此而提高。

2.1.3 JavaScript：

这些是长期以来被视为理所当然的最佳实践：

• 遵循 JavaScript 放置的最佳实践，包括对全局项目脚本使用全局设置和对本地脚本使用页面设置。

• 对可以并行加载的脚本使用 <async> 和 <defer> 属性来优化页面加载时间。

  
  

2.2 Webflow 组件

在研究项目设计时，您是否经常问自己这样一个问题：我可以将项目中的哪些重复元素用作不同页面的模板？ Webflow 中的组件允许您通过从元素和子元素创建可自定义的块来保持一致、高效且可扩展的设计工作流程。您可以在整个站点中重复使用这些块，并在一个地方修改它们，以避免单独修改每个重复的布局（来源 - https://university.webflow.com/lesson/components?topics=layout-design ）。

通常可以是：

• 导航栏
• 页脚
• 按钮 - 如果它是非标准的，则具有自定义设计和效果和/或分支结构。
• CTA 横幅 - 整个项目中通常会使用其一或两种版本。
• 我最常用的符号是Section - 应该有一个带有标签和类的空部分，里面有所有标准类，包括一个容器、标题 2、段落和几个空的 div 块。我向你保证，这是你将使用的最常用的组件。只需添加它，取消链接并完成开发部分。通过将其添加为基础，你可以节省大量时间，而不必单独添加每个 div 块。

使用代码，您可以扩展 Webflow 组件的功能，并为客户提供一个非常灵活的项目管理系统，而无需访问 HTML 页面结构。这是一种全新的 Web 开发方法，允许客户在开发人员完成项目后控制项目的许多设计方面。将来，客户将能够基于已创建的组件轻松地独立创建新页面。并且只有在需要开发全新元素时才需要聘请开发人员。在使用组件时，客户几乎没有机会破坏您完美准备的 HTML 结构（但是，我们的客户通常非常有能力）。

2.3 媒体资产分组

对资源进行分组，可以使其更易于查找和管理。例如，您有一个巨大的导航栏，其中有许多带图标的链接。设计师已经准备好了其中一些，承诺在 3 天内完成另一部分，最后一部分仍在客户考虑中。当设计师绘制新的选项时，客户会审查其中的一半，进行编辑并批准另一半，最后将它们发送给您进行开发，此时您很可能已经在资源面板中拥有许多其他图像。图标图像将被破坏，将来查找/替换它们将不方便。在这种情况下，对资源进行分组将使生活更轻松。分组可让您保持项目中的所有媒体干净整洁。

2.4 储备存档文件夹以保存：

• 动态 СMS 页面的静态版本。如果有任何更改或编辑，您可以更轻松地在静态版本中进行更改，然后将其传输到 СMS 页面。Webflow 中 СMS 页面的特性是，当您将所有必要的元素与集合中的相应字段连接起来时，您将无法复制存在此连接的元素并将其传输到静态页面。

• 包含元素初始版本的页面。频繁进行大量编辑迫使我们小心谨慎，不要从项目中删除已构建的内容。将其移至存档页面并留待更好的时机。

• 实验的测试页面。

  
  

第 3 阶段 - 最终编辑

在项目结束时将项目转交给客户之前，需要做什么很重要，这样您才不会觉得您的项目现在真的升级了：

3.1 清理项目：

• 删除未使用的类和动画。

• 删除注释掉的、未使用的代码。

• 删除未使用的媒体。如果面板中有很多不必要的东西，并且无法单独删除它们，我建议使用一种破解方法：删除所有资产 - 发布项目 - 重新加载 webflow - 并仅将项目中使用的媒体放入面板资产中。

  
  

3.2 为客户创建项目用户手册。

除了样式指南页面外，还应该有一个页面描述如何使用完成的项目。优秀的开发人员会考虑客户将来如何管理项目。更改的难易程度以及客户在管理更改时将拥有多大的自由度。多亏了 webflow，这一切才能尽可能接近完美。有了 CSS 知识和对 webflow 组件操作原理的理解，您就可以组合一个项目，在其中可以轻松更改现有页面或创建新页面。

3.3 给予备份唯一的名称。

描述性原则适用于您作为开发人员命名的所有内容。项目的任何部分对于您和您的同事来说都应该是直观的。

结论

最后，让我们简单总结一下作为开发人员在改善日常生活时应该关注的要点。

第 1 阶段 - 准备

• 创建样式指南以确保设计元素的一致性和可预测性。
• 设置变量以简化开发并提高效率
• 从一开始就优先考虑可访问性，以创建包容性强、用户友好的网站。

第二阶段——直接开发

• 添加编码能力作为一项宝贵的技能，以解锁 Web 开发的无限可能性。
• 使用 Webflow 组件作为强大的工具来确保您的项目面向未来。
• 将媒体资产组织成组，以便于访问和管理。
• 维护一个存档文件夹来存储未使用的元素以供日后使用。

第三阶段 - 直道

• 清理未使用的元素和资产以优化项目性能。
• 创建客户指南，以促进无缝交接和客户管理。
• 保存项目的有意义的备份，以防止数据丢失并确保连续性。

采用最佳实践对于最大限度地提高 Webflow 开发的效率和生产力至关重要。通过遵循这种方法，您不仅可以节省重复任务的时间，还可以释放宝贵的资源用于放松、自我发展和创建创新项目。让我们改变我们的工作流程，释放我们的创造力，打造更酷的东西。

谢谢阅读！

我很乐意分享我的想法和经验，帮助其他开发人员简化工作。通过分享我所学到的知识，我希望让开发过程更加顺畅，并为每个人创造更好的体验。