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:
@Eric Belozovsky 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
Yes, I use and follow CF. I also use import app and it only imported relume's layout titles (ie: header54, layout5, etc)
Example of class naming system I use and this doesn't get imported to webflow
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
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:
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.
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)
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.
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) 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
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.
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.
its because its putting the page name in a section that you are using on multiple pages, yeah?
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
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
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
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 pagecta3 -- used by 2 pages
this doesn't work out if it is under a component - I'd have to unlink the page-specific cta3 to modify its class
that includes multiple steps, especially finding ctas/sections you want to turn to page-specific
plus, the app imports sections to two different placescta3section_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
as with anything, there's like 1000 ways to do something and everyone has their own way
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
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.
I remember having to go through this exact scenario that you are describing on a project
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.
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.
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
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
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.
@Eric Belozovsky can you share here or in DM a read-only link to a webflow project where you have this naming convention?
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
