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

Enhancing Class Naming in Relume for Efficient Webflow Exports

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)

48 comments

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
8.
Click all sections on Relume site builder to make them local (not global/component)
9.
Export again
10.
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
11.
I replace all unlinked sections with saved components from #6
12.
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
Eric B.
·
·
I am referring to this feature
Matt J.
·
·
so you are deleting the components/pages from designer but keeping the classes within the CSS - so then upon a second import, they revert back to the default component names and then you use finsweet folders to rename? For some reason I don't feel like that is what you are saying. Any chance in the next day or two you could record a loom of your process at all? I think that would be tremendously valuable for me and the team to see and understand where we can provide value with class naming. I do like your original suggestions above.
Matt J.
·
·
okay I think I finally follow
Matt J.
·
·
its because its putting the page name in a section that you are using on multiple pages, yeah?
Eric B.
·
·
Yes, and it doesn't do that if it is inside a component
Matt J.
·
·
so if I have the same CTA on all 15 pages - and even if I mark it as a global section in site builder, it still just imports as a regular section and its renamed with the page name in it
Eric B.
·
·
Nope, it will be cta1 or whatever and if I have several different ctas across pages, i will have 4 ctas in my folders and it gets confusing because all of them don't show a list of pages they are in
Matt J.
·
·
ah so the opposite, thats also an issue yeah
Eric B.
·
·
yeah so imagine layouts...headers...
Matt J.
·
·
so you are styling cta1 in a couple of different styles, yeah?
Eric B.
·
·
ok so heres a scenario I use four different ctas cta1 -- used across most pages cta3 -- used across 3 pages cta4 -- used across 2 pages cta7 -- used across 1 page all imported as components, and i forget which is which and folders dont show a list of pages cta1, cta3, cta4, and cta7 show up in
Eric B.
·
·
their components get named by their section title from relume site builder
Eric B.
·
·
if you open the component itself, you will find either one of four cta#
Matt J.
·
·
right
Eric B.
·
·
so if for example I want to style cta3 to several different styles (ie: page-specific design) -- I'd either duplicate or add a sub-class, right? under my naming system, i tend to opt for page-specific class so ie: page-specific_cta3 -- used by 1 page cta3 -- used by 2 pages
Eric B.
·
·
this doesn't work out if it is under a component - I'd have to unlink the page-specific cta3 to modify its class
Eric B.
·
·
that includes multiple steps, especially finding ctas/sections you want to turn to page-specific
Matt J.
·
·
yeah, thats a pretty tough problem for sure
‼️1
Eric B.
·
·
plus, the app imports sections to two different places cta3 section_cta3 if you rename cta3 to something else and forget to rename section_cta3 to match cta3's new name, you will confuse yourself later and get lost
Matt J.
·
·
as with anything, there's like 1000 ways to do something and everyone has their own way
💯1
Eric B.
·
·
yep, so that is why I felt my suggestions would solve a lot of things, and you arent reponsible for the failure on finsweet's folders feature's part -- not be able to detect elements under components
Matt J.
·
·
for me, I tend to just use the same CTA section across the entire site - maybe I'll use a different color, or a different image (and definitely use different copy) but in my mind, its the same component. I try to use the same components as much as possible.
💯1
Matt J.
·
·
but I know we were just using CTA as an example
Matt J.
·
·
I can see how this would apply to page headers for instance too
Matt J.
·
·
I remember having to go through this exact scenario that you are describing on a project
💯1
Matt J.
·
·
I too, tend to just make the pages myself rather than use the app and thats probably not great - definitely a lot of room for improvement here no doubt. No need for a loom - I finally have picked up what you are putting down here Eric - I really really appreciate you sticking it out with me here and explaining this in such depths. This is definitely not going to be a quick fix or feature unfortunately but I'll explore a few things and try to make a strong case for it internally.
❤️1
Eric B.
·
·
Awesome, thank you for sticking it out with me as well! Much appreciated!
Matt J.
·
·
I would actually suggest potentially the same for you as well - if you copy/paste section by section from site builder, you'll at least get the content imported but the classes will be the default ones, and if you build out page by page, you'll at least be given the oppportunity to rename sections as they come in. I think that could be the simplest workaround for you in the short term - rather than mass importing pages and sections into a webflow project - if you build page by page/section by section, I bet you'd save a lot more time in the long run. Now OBVIOUSLY if it all just imported automatically with the correct class names that would be more ideal. Just trying to think if I was in your shoes, this is likely what I would do instead.
Eric B.
·
·
Here's a caveat - if I do page by page, I will be forced to repeat entire process (ie: if I use layout504 on page 1 then page 2 also has layout504, i'd have to remove all elements' items' subclasses to finally reach to the primary class to replace it with page 1's layout504's new class name) Also adding a clarification: I don't copy/paste section by section from site builder - I copy/paste their section names
Eric B.
·
·
example - when this gets imported, i will be able to track sections in order like for example second section on homepage, it'd be full_button_background-image -- it is easy for me to just click the second section, find its relume default class name, then go to folders & rename it with full_button_background-image
Matt J.
·
·
I might do a Loom on this tomorrow because yeah what I'm proposing doesn't seem all that difficult or unreasonable but what you are saying sounds very unreasonable and I just want to make sure we're both using the same tools the same way.
👍1
🙏1
Matt J.
·
·
Eric B. can you share here or in DM a read-only link to a webflow project where you have this naming convention?
Eric B.
·
·
Unfortunately, this webflow project's classes are not fully cleaned up yet. Once I am done cleaning it up & feel satisfied with its naming convention (my teammate and I have been exploring and experimenting with naming convention through our experiences with Relume & building/editing stuff thru webflow, and yeah, this change to import feature has certainly made some impacts to my line of thinkings), Ill share it with you thru DM. Likely by tomorrow (Tuesday) or Wednesday My teammate is also working with me on making our agency's internal webflow library of "popular/mostly-likely used sections" & its variations (based off relume webflow library) with our currently WIP naming conventions, so that we will not experience this level of difficulty and frustration every time when we start a new website project After the library gets built, we'd primarily use Relume for its style guide (and import it) & some new sections/layouts and that would be thats it, the rest would be made directly on Webflow by our team (Designer & Marketers) -- less usages on imports due to limitations that I addressed which you've come to understand Only until these features get added, I can anticipate us returning to higher level of usage on site builder & imports because that will save time on renaming if we experience bigger-scale website projects that require different naming convention