Community forum for knowledge and support

Updated 9 months ago

the importance of clean code in webflow

At a glance

The community member who posted the original post is interested in using Webflow to create professional-looking websites, but is unsure about the use of data-w-id attributes and how they relate to animations. They plan to work with developers in the future to connect their Webflow-built sites to a headless CMS.

The comments discuss the use of data attributes in Webflow, noting that they are necessary for connecting HTML elements to JavaScript. However, some community members express skepticism about using Webflow-generated code with a headless CMS, suggesting that it may be better to use a proper frontend framework like Astro or Next.js instead. There is also discussion around the challenges of integrating Webflow with headless CMS solutions, and the potential benefits of using tools like Figma for UI design.

Overall, the community members seem to have a range of perspectives on the best approach for using Webflow in conjunction with headless CMS solutions, with some advocating for more traditional frontend frameworks, and others exploring ways to integrate Webflow into a headless CMS workflow.

I love the fact Webflow does a really great job with the code. However I never code so I just assume it's great because I heard. I'd like to do my sites professional as possible so I'm asking are these data-w-id's OK or ugly? It caused by the animations?

In the future I plan to work together with devs where I work on frontend and they can connect it to a headless CMS. So It could be important.

N
Á
5 comments

data-*** are called data attributes.
Essentially these are the attributes that are used to connect the html element to JS.
These are necessary for Webflow, and it's not just for animation.

I don't have that good of an experience using Webflow generated code and extending it to be used with headless CMS.

Right now, I would basically just take bits and pieces of the code I can use in a proper frontend framework.

It can work, but it's too time consuming, in my opinion and there are tons of problems.

With Headless CMS, you should use proper frontend framework like Astro, or Next.js instead.
Anyway, that's my opinion, but there's a reason Relume launched React library too. 🙂

Thanks I see. I've seen a few examples but not any good case studies so far. I'm a believer of getting the UI designer on the frontend, but realistically it's only possible with tools like webflow. Most of creatives won't code but they want to have more control over subtle things like sizing and interactions.

I was also wondering about devlink in webflow. Isn't that something meant for things like Strapi? It's react

I've seen all kind of Frankenstein monsters work. 😄
My point is that it might not be the best practice, and there are more optimal ways.

Isn't Figma the best way for UI designer to stay 'in charge' of things like pricing and interactions?
I'm a believer of both designers and developers doing their part of the job, but learning the basics of both, so the communication can be on the other level.
I might have a bit of a weird perspective, because I do both. 😄

There's so much more to think about than just what's rendered on the page when working with Headless CMS.

DevLink is still in early development.
Looks great, but I'm not convinced it's ready.
There are also a lot of tools that generate code from Figma.
But, in order for them to work flawlessly, you have to think and structure design a certain way, and it still needs developer to review the code and make it work.

I'm from UI. Frankenstein is something I'd like to avoid though. There is a difference between designer and designer, I like to understand systemic things, conventions, however I still care about things like "how to make this animation perfect". For me it feels like we're on a path to get closer to frontend in some cases. Like smaller landing pages not entire complex portals.

But there is other considerations unfortunately. If the client doesn't want to host in Webflow 😄 That's why I'm pushing headless.

Thanks for your thoughts, I also have some skepticism too. Just want to have clear perspective in this topic. If we can design with webflow, mix with headless, and the result is much better than an elementor page that's already a win in short term.

I understand completely where you are coming from.
That's where I was, so I got into code too. 😄

I hear it described as front of the frontend sometimes.

Lately, I've been building marketing websites with Sanity CMS and Astro for the frontend.
It's for clients that want the absolute best in terms of performance and customization.
It's not that difficult to create almost a full page builder.
Similar to Elementor, but without the bloat, and client ducking up the website. 😄

Add a reply
Sign up and join the conversation on Slack