Enhancing Class Naming in Relume for Efficient Webflow Exports

Eric B. · 2025-04-28T21:50:57.429Z

Hello, can someone please explain to me how class naming import works in Relume to Webflow? I have been experiencing different systems - 1) components only having section's name but not inside, 2) classes include page's name combined with section name, and 3) classes containing page's name but not section names SUGGESTION: 1. Make a field for class naming -- for developers if we want to make user-friendly terms to describe sections, and proper section class names so we dont need to rename them all once we export to webflow 2. If marked as global / component, allow us to name the component (a field) 3. Allow us to check/uncheck "add page title as prefix to all classes" on page setting Relume site builder saves a lot time, then also consumes a lot of our time renaming classes (5-10+ hours of full concentration)

Enhancing Class Naming in Relume for Efficient Webflow Exports | Relume Community

Matt J.
·
·
Eric B. it depends on a few things - if you use the import app it’ll have full context of the page and can rewrite classes. If you are just copying from site builder or library it wont. We have some documentation here on the naming convention: https://www.relume.io/resources/docs/why-relume-uses-client-first
Eric B.
·
·
Yes, I use and follow CF. I also use import app and it only imported relume's layout titles (ie: header54, layout5, etc)
Eric B.
·
·
Example of class naming system I use and this doesn't get imported to webflow
Eric B.
·
·
When it is marked as a component, only the component gets the name, but not elements inside - default class names (header54, form2, etc) get retained When it is not marked as a component, these names don't overwrite default ones
Eric B.
·
·
(ignore descriptions on the site map, they are old/i dont use them atm)
Eric B.
·
·
This is what I do as a workaround to clean up my classes after experiencing several different & confusing Relume to Webflow (through Webflow App) class naming settings:
1.
Make a relume styleguide
2.
Export styleguide to webflow
3.
Customize the styleguide
4.
Make a webflow backup called "Blank - Start" in case if anything gets screwed up
5.
Make and/or mark all sections as component/global (to leverage Webflow's Marketer role) on Relume site builder
6.
Export to webflow through webflow app
7.
Remove all pages, and remove all components on last page (home)
a.
This is to create components, retain their names, and adjust names (ie: remove dashes) or create folders based on their class naming
15.
Click all sections on Relume site builder to make them local (not global/component)
16.
Export again
17.
Go through all classes to rename and put them in proper folders using Finsweet's extension -- and cross-check Relume wireframe to find default class names before renaming on Webflow -- I copy & paste Relume section title to rename classes on webflow
a.
This allows me to create page-specific class names and be tracked by Finsweet Folders
21.
I replace all unlinked sections with saved components from #6
22.
Rename components as mentioned @ 7a
Matt J.
·
·
Eric thanks for this detailed workflow - may I ask why you do step #7?
Matt J.
·
·
Also I didn't realize for some reason that the team had implemented a change to class naming when importing via the app but it appears for over a month now that we no longer rename classes on import. Which personally I'm okay with being that the Finsweet folders method is better IMO than what was being done via the app.
Matt J.
·
·
maybe this change has not propogated to the copy/paste though, will test.
Eric B.
·
·
step #7 — faster to create pages by creating new instead of replacing existing pages, especially when you have 15+ pages and you’d be likely to run into some webflow errors during importing via the app Ahhh @ the change, and personally I think that is a BIG con, not a plus. Finsweet folders method is great, but still very time-consuming to organize all folders every single time when you start a new webflow project. This also doesn’t leverage Webflow’s Marketer role — but rather, this becomes a tremendous roadblock for the team — to wait for the developer to clean up the classes then they can finally begin creating & editing pages and sections It would be incredibly fantastic if we users are empowered to have an option to name each section’s class and have an on/off option for adding a prefix to class under a page — that will drastically cut down our time wrestling with classes manually. And not only that, Finsweet folders don’t save our changes unless if we click “save changes” & allow webflow to save the backup & reload. If we get focused on the folder, make multiple changes, then either we encounter some webflow error, internet connectivity issues, or get sidetracked, our progress gets lost. That is why I love google doc/slides/sheets for example because they save automatically, and relume does the same. (That is why I hit “save” on all my adobe programs lmao, unlike some of my team members and they have their war flashbacks)
Matt J.
·
·
so if you delete all of those things, why do the import via the webflow app?
Matt J.
·
·
the naming of the classes before was based on the page name - so you'd end up with a class like section_page-with-really-long-name_component - when all it needed to be was section_page-name_component - I obviously see the value in being able to have those classes renamed but it seemed like it was doing more harm then good because if you had multiple nested folders, it was actually not possible to undo those nests via the finsweet folders tool.
Matt J.
·
·
just to be clear, I'm not arguing here - I'm just trying to provide more context AND receive more context - ultimately, I'd love to see how we can improve this.
💯1
❤️1
Eric B.
·
·
1) the first import creates components, webpages, and CSS 2) after deleting all webpages and components on homepage (they are named by section title from relume but elements’ classes inside the components remain “relume default” and pages (folders remain), and re-import all pages but with local sections this time, all sections show relume default naming system, not by section title 3) now, with all sections unlinked, finsweet folders can track and find all “affected items” — and you can click any webpages under its affected items list to make a section page-specific if needed. This won’t happen if elements are inside a component— they are not discoverable by finsweet folders 4) after renaming all sections, the saved components from first import will also have their inside elements’ classes’ names updated 5) now I then replace all unlinked sections with components
Matt J.
·
·
It might be too late in the day for me to follow - but as a quick test about finsweet not renaming classes that are components - I was able to do that just fine a few seconds ago. Its even later for you though so I guess my excuse is invalid lol.
😂1

Enhancing Class Naming in Relume for Efficient Webflow Exports

48 comments

Enhancing Class Naming in Relume for Efficient Webflow Exports

48 comments