Streaming live at 10am (PST)

Efficient Workflow Question: Duplicate w/o affecting original

So I’ve been using Webflow for a bit now and the most frustrating part of it for me comes with trying to duplicate something for use somewhere else, but also be able to edit it WITHOUT affecting the original element that I duplicated.

If you copy and paste/use the same class, that obviously edits the original element.

If I create a symbol, same thing…

If I use a symbol, and then unlink the symbol, same issue as copy and paste with the classes.

Is there a solution that I’m missing? Do I literally just have to copy and paste and then add an extra sub class every time I want to make a tweak from the original?

An example use case: A section that already has the padding, size, and elements inside that I want. Obviously a section like that could be used multiple times down a landing page.

Any insight is appreciated!

Do I literally just have to copy and paste and then add an extra sub class every time I want to make a tweak from the original?

Correct, this is just the nature of CSS classes—anything that shares a class with something else will have the same styles applied.

If you’d prefer not to use combo classes, you can always duplicate the class by selecting the class name in the Selector field:

image

The new class will have the exact same styles applied, but any changes made won’t affect the original class.

In your example, what would be the differences between the two sections—just the content within it? Do you happen to have a specific example where you’re running into issues?

1 Like

Ah awesome I didn’t realize that was there. I think that will work for me. Yeah I just feel like sub classes get messy and I like the look of just one name, especially when viewing in the side panel.

An example would be a section with an image on one side (left), and then supporting text on the other side (right) with a heading, paragraph, button.

Using that same section below, the first thing I’d typically do it simply flip the section so that the text is now on the left and image on the right so that I can break up the flow a bit.

Thanks a bunch for your help, I’ll try the class duplication soon and mark it as the solution if it does what I need! :slight_smile:

An example would be a section with an image on one side (left), and then supporting text on the other side (right) with a heading, paragraph, button.

Using that same section below, the first thing I’d typically do it simply flip the section so that the text is now on the left and image on the right so that I can break up the flow a bit.

Ah okay, that makes sense. For something like this, combo classes actually make a fair bit of sense as with flexbox you only need to modify a single style.

If you end up duplicating the class, not only would you need to change two (or more) elements if you decided to do something like adjust the padding, but you’d also have twice the code rendering on the page. This isn’t a huge deal for one or two sections, but getting in the habit of this type of workflow can cause bloated CSS files on larger sites.

I recorded a quick video to illustrate the benefits of combo classes that hopefully changes your mind about using them going forward:

If you have any other questions, feel free to reach out :v:

1 Like

Thanks a bunch for taking the time to make that for me, learned a lot actually haha. I didn’t even realize that Inheriting class selector existed :flushed:

By the way, what hotkey did you use to set your padding/margin to 0 with 1 click?

1 Like

Of course! It’s a super useful feature once you get familiar with it so I figured you’d benefit from a quick run through.

By the way, what hotkey did you use to set your padding/margin to 0 with 1 click?

Alt + Click removes any blue, non-inherited style changes. If you made the change to a style that was inherited (amber) then it will return it to that value :+1:

1 Like

Great answer, Mike, thank you. Is there a benefit to doing it one way or the other - duplicating classes vs adding combo classes?

I think maybe you have already answered this from the performance perspective and not having lots of extra/duplicate classes in the style sheet, but I’m not sure that’s a huge difference vs having lots of combo classes hanging around. I could be wrong.

Is there a benefit to doing it one way or the other from a workflow perspective? I am coming from writing scss so this is a bit of an adjustment for me. I get myself into trouble by duplicating elements that have the webflow-generated generic classes in them, like “text block 7”. then i duplicate that whole element and then duplicate the top-level class for the whole div, thinking that it will cascade down and I won’t have to duplicate or add a class to anything within that div, but it doesn’t seem to play out that way.

Perhaps a shorter way to ask this is, what’s your best practice workflow for duplicating an element for reuse? Do you duplicate the class or add classes? Thanks!