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.
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:
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?
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!
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
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
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!
My apologies @jbc1, I totally missed this but I was notified when someone “liked” one of my replies so I figured I’d give some insight in the event you haven’t found a good workflow.
In terms of duplicating an element, I’ll either literally copy/paste the element around as needed, create a new element and select the existing class (including any combo classes)—although this is a long winded way of the doing the first suggestion— or, if layout is consistent but content changes, I’ll create a Symbol and use Content Overrides. Now that I’m comfortable with it, the last option is my preference as it keeps things extremely consistent between multiple elements across my project in a way that is not always possible with class styles alone, but obviously it’s not necessary for all situations.
Hopefully that helps out and sorry again for the long delay
This was very helpful, especially the tip on clicking the inheritance selector to go back and view/edit a class higher up in the inheritance tree. Until now, I had been removing the intervening classes and then I’d have to remember them so I could add them back when I was done.
