The biggest problem with site builders is the code they generate is usually garbage. As I’ve recently discovered, this isn’t the case with

网站建设者最大的问题是他们生成的代码通常是垃圾。 正如我最近发现的，情况并非如此

Webflow, and although it's marketed as a development tool for designers that can’t code, I (a developer that can code) have started using it on my client's sites, and even for my own Webflow ，尽管它是为无法编写代码的设计人员开发的一种开发工具，但我(可以编写代码的开发人员)已经开始在我的客户的站点，甚至我自己的agency site.代理站点上使用它。

那么，为什么大多数网站建设者都那么烂？ (So why do most site builders suck?)

It’s a result of the interface being very different from the way that webpages actually work.

这是界面与网页实际工作方式大不相同的结果。

An example is Wix, where you can just drag an element around to position it anywhere on the page. Anyone who codes knows this means it’s using absolute positioning everywhere, which is hard to adjust on different sized devices, and if you adjust on every size, you are producing a huge amount of garbage CSS.

Wix是一个示例，您可以在其中拖动元素以将其放置在页面上的任何位置。 任何编码的人都知道，这意味着它在所有地方都使用绝对定位，这很难在不同大小的设备上进行调整，并且如果在每种大小上进行调整，都会产生大量的垃圾CSS。

Other site builders just abstract far too much away from the realities of HTML and CSS. They try to make things so easy, that you have no idea what is actually going to be produced.

其他网站建设者只是抽象得与HTML和CSS的现实相距太远。 他们试图使事情变得如此简单，以至于您不知道实际要生产什么。

You also have no visibility of which class names are going to be created. And when you create and then delete something, you don’t know if there is something left over — unused CSS classes or empty HTML tags.

您也看不到要创建哪些类名。 而且，当您创建然后删除某些内容时，您将不知道是否还有剩余的内容-未使用CSS类或空HTML标记。

Webflow如何解决此问题 (How Webflow fixes this)

Webflow keeps its interface very close to how the web actually works. There is no dragging to position like in Wix. You need to understand and use the box model, flexbox, CSS grids and other front-end development concepts.

Webflow使它的界面非常接近于Web实际的工作方式。 不会像Wix一样拖到位置。 您需要了解和使用盒子模型，flexbox，CSS网格和其他前端开发概念。

In fact, it’s almost like writing code, but by clicking buttons and moving sliders instead of writing out the lines.

实际上，这几乎就像编写代码一样，但是通过单击按钮和移动滑块而不是写出行。

You can give elements names with actual meanings (AKA semantic classes). This one is ‘banner’, this one is ‘newsletter-form’. Unlike other builders where you constantly deal with lots of randomly named divs.

您可以给元素名称指定实际含义(AKA语义类)。 这是“横幅”，这是“通讯形式”。 与其他构建器不同，在该构建器中，您经常处理大量随机命名的div。

This means you have a lot of control over the code that is eventually generated and you can choose the best strategy to achieve a certain layout.

这意味着您对最终生成的代码有很多控制权，并且可以选择最佳策略来实现特定的布局。

对于非开发人员来说这可能很难 (This might be difficult for non-developers)

This level of control and closeness to actual code makes Webflow more difficult to use for the average person, than other builders like Wix.

这种控制水平和对实际代码的接近程度使得Webflow对于普通人来说比Wix等其他构建器更难使用。

If you build a website for a client in Webflow, they will mostly just use the Editor panel — which is a simple interface for adding content to the Webflow CMS.

如果您在Webflow中为客户端构建网站，则它们通常只会使用“编辑器”面板-这是用于向Webflow CMS添加内容的简单界面。

However if they entered the designer panel, they will most likely be overwhelmed and mess something up, unless they are very tech-savvy.

但是，如果他们进入设计师面板，除非他们非常精通技术，否则他们很可能会不知所措并弄乱了东西。

A professional designer will fare better, but to get the most out of Webflow and to be able to build a clean and bug-free site, they must understand at least the basics of HTML and CSS.

专业的设计师会做得更好，但是要充分利用Webflow并构建一个干净且无错误的网站，他们必须至少了解HTML和CSS的基础知识。

Things like the box model, types of positioning, maybe a basic understanding of flexbox, as well as theoretical knowledge like why it’s best to build mobile-first, and how to keep a site loading quickly.

诸如盒子模型，定位类型，对flexbox的基本了解以及诸如为什么最好以移动优先构建，如何保持网站快速加载之类的理论知识等。

非常适合团队和小型机构 (Great for teams and small agencies)

I run a web design & development agency together with my girlfriend Kristina — she’s a UX/UI designer.

我与女友克里斯蒂娜(Kristina)共同经营一家网页设计和开发代理公司-她是UX / UI设计师 。

We have a small portfolio site for the company, and previously, it’s always been a pain to make updates. We’ve always used a static site generator (first Jekyll then Hugo).

我们为公司提供了一个小型投资组合站点 ，以前，进行更新始终是一件痛苦的事情。 我们一直使用静态站点生成器(首先是Jekyll，然后是Hugo)。

Whenever Kristina wanted to freshen up the design, she would update her mockup in Figma, and then it’s up to me to write the code. Meanwhile I’m often swamped with client work and it would be several weeks until I have time to work on our site.

每当Kristina想要更新设计时，她都会在Figma中更新其模型，然后由我来编写代码。 同时，我经常被客户的工作所淹没，要等上几个星期才能有时间在我们的网站上工作。

We’ve recently rebuilt our portfolio site in Webflow, and Kristina was able to build almost all of it herself. This is pretty crazy if you think about it. Building highly performant websites and totally custom website was previously a skill that takes years to learn.

我们最近在Webflow中重建了我们的投资组合站点，而Kristina能够自己构建几乎所有站点。 如果您考虑一下，这真是太疯狂了。 建立高性能网站和完全自定义的网站以前是一项需要数年学习的技能。

In future she will be able to make updates to the site while I can sit back and relax…ahem… I mean… continue working hard on client projects!

将来她可以在网站上进行更新，而我可以坐下来放松一下……哎呀……我的意思是……继续努力开发客户项目！

The most important win for us is that we will be able to create new landing pages for our services very quickly. I’ve actually seen large companies using Webflow as a ‘landing page machine’, allowing more customizability than leadpages or similar.

对我们而言，最重要的胜利是我们将能够很快为我们的服务创建新的登录页面。 我实际上已经看到大型公司将Webflow用作“着陆页机器”，它提供的可定制性比引导页面或类似页面更大。

We’ve also had ideas for certain blog posts — tutorials and guides — that would need unique layouts. And while this would be annoying for me to rewrite in code, it becomes much easier in Webflow.

对于某些需要独特布局的博客帖子(教程和指南)，我们也有一些想法。 尽管这对我来说用代码重写很烦人，但在Webflow中变得更加容易。

对于设计师而言，这是一个不错的工具，在开发人员手中是一种武器。 (A nice tool for a designer, a weapon in the hands of a developer.)

Knowing how it all works underneath means developers can be power users of Webflow. We can take it’s capabilities to the absolute limit.

知道其所有工作原理意味着开发人员可以成为Webflow的高级用户。 我们可以将其功能发挥到极致。

I know it’s still not as fast or as flexible as writing your own code. But there are situations where you need a CMS or a simple page builder that produces acceptable code.

我知道它仍然不如编写自己的代码快或灵活。 但是在某些情况下，您需要生成可接受代码的CMS或简单页面构建器。

You might have a client that wants to make design changes later on, or you might be handing off to a designer, or it might just be a site that needs plenty of small changes regularly.

您可能有一个客户想要稍后进行设计更改，或者您可能要移交给设计师，或者它可能只是一个需要定期进行大量小更改的站点。

In these situations, Webflow is my go-to tool right now.

在这些情况下，Webflow现在是我的首选工具。

What other options are there? I’d love to hear your thoughts. Please leave a comment below!

还有什么其他选择？ 我很想听听您的想法。 请在下面发表评论！