Are Webflow's data-w-id Attributes Acceptable for Professional Sites?

·May 22, 2024 08:12 AM

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.

5 comments

· Sorted by Oldest

Nenad V.
·
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. 🙂
Ádám S.
·
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
Nenad V.
·
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.
Ádám S.
·
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.
Nenad V.
·
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. 😄

Are Webflow's data-w-id Attributes Acceptable for Professional Sites? | Relume Community

Nenad V.
·
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. 🙂
Ádám S.
·
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
Nenad V.
·
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.
Ádám S.
·
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.
Nenad V.
·
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. 😄