Why is working with classes hard in Webflow?

Hi,

Since I’m still learning Webflow, it would be great to hear some tips from you guys. I’m having a hard time trying to do something “simple”.

Our previous designer created a landing page. I want to create another page based on that page with some modifications. However, once I duplicate that page and start to make some changes, those changes affect the original page and other pages on the website. I think it’s related to the classes that are shared among some pages, right? If that’s the case, how do I proceed? Because I want to keep the structure and some design elements from the original page, so I don’t have to redo everything.

Cheers.

Hi @Jonny, It doesn’t have to be.Just like any other cases when working with css/classes. Make sure you’re not modifying the properties of a class if you don’t want it to affect the other elements sharing it.

One way to avoid this is to duplicate the class and give it a unique name. Work off of that instead. Else the other option is to just add a modifier class, i.e. “Heading M” to “Heading M Modified”

Screenshot 2023-01-04 at 15.30.13

Hi @dennyhartanto thanks for your quick answer. Let me see if I got it right. For example. If I have a page with those classes, which are shared with all my pages.

Screenshot from 2023-01-04 09-36-16

And I want to use that page with some modifications, should I create another class like “header-2”?

But I noticed that those properties came from the original class “header”, with one difference. Same values are in glowed in blue, awhile in the “header-2”, all values are glowed in orange.

Properties that are in blue are applied by the latest (most-right) class, in this case header-2. That means that you already have header-2 created previously.

My suggestion here is that you can add a more descriptive class, e.g. Container, Header, Contact Us

In your case, I would probably rebuild the element.
Only use combo classes when you know for sure the main class needs to be consistent throughout your site.

When I want to leverage styling from one element, knowing that I’m going to modify it for another purpose, I used the “duplicate class” feature. See screengrab.

Hey Johnny, you’re on the right track.
Classes are feel incredibly complex because they are the central connection point for everything…

  • They connect your Styles to your Elements
  • They describe layout and style
  • They can be layered into subclasses, to create variations of style and layout
  • They contain breakpoint-specific styling, which cascades
  • They contain state-specific styling, like “current item”
  • They are often used as a connection point for 3rd party scripts

All of that in one, relatively simple-looking pill-label.

Webflow Univeristy has a lot of good content to walk you through those features.

You might find this interesting;