Relume
Log in

Community forum for knowledge and support

Updated last year

Optimizing Webflow Class Naming for Efficient CSS Management

At a glance

The community member who posted the original question is concerned that after importing their site into Webflow, the classes (outside the style guide) have picked up the page name and classes from Relume, resulting in multiple classes for similar sections that they would style the same. This has led to their CSS becoming much larger than necessary.

The comments suggest that the community member should have made the sections that appear on multiple pages into global components on Relume. Another community member is unsure how this would work when Figma is added to the workflow, but they offer the insight that if the community member wants to have a section without the page name, they should turn it into a global section in the site builder.

There is no explicitly marked answer in the comments, but the community members provide suggestions on how to address the issue.

JJames Decker
·

When we imported our site into Webflow most of the classes (outside the style guide) picked up the page name and then the classes from Relume (e.g. home-page-section-14-faq-accordion)- which for sections that are reused across the site now have multiple classes for the similar sections we would style the same. Plus now our CSS is much bigger than it needs to be. Do we do something wrong?

E
M
J
4 comments
EEmily Marais

I think you should have made those sections that appear on multiple pages into global components on Relume

EEmily Marais

Although I’m unsure how this works when Figma is added to the workflow. will be able to share some insight

MMatt Johnson

yep is correct - if you want to have a section without the page name, turn it into a global section in site builder.

JJames Decker

Got it, thanks!

Add a reply
Sign up and join the conversation on Slack