Duplicate Classes

Maybe you can improve guys an easy way to duplicate classes in style list. It’s painful to set many classes with similar attributes.

5 Likes

Agreed this would be cool, I think longterm slightly easier and better class management would be awesome :smile:

Arthur

1 Like

Can’t you gather all the shared properties in one class then add specific classes for specific styling?

Like:

mybox
mybox bigger
mybox red
mybox darker

Just to check if you’re not missing something with CSS and Webflow…

Maybe we want to use a lot of atributes of a existent class but the new one don’t have the same context, you know? So I think it could be nice to have a feature to duplicate them.

1 Like

You could add the class and an ID to the element and then style out that element different from all of the other classes I believe (but then only that element will have those styling as an ID can only be set to one element per a page). :smile:

@brryant or @callmevlad when you add an ID and a class to an element, does it then effectively work like a class styled within an ID or does the ID have to be given to it’s parent container? And can you add interactions by ID? This would be stinking awesome for the interaction panel to be able to callout by ID rather than classes as you could target individual elements outside of nested/sibling elements.

If it works like this, then please just ignore my thoughts here as I’m not near a computer to test. :smile:
Will test it in the morning @douglasrpinho and let you know the outcomes. :smile:

Thanks,

Waldo

It would be great too! Interactions by ID because we can’t select a parented class.

1 Like

Yes, one of the main reasons for me to want to duplicate a class is to control it’s interaction. If interaction by ID is possible, it will save us a lot of time!

2 Likes

I agree. I often will use the class name as a way to help me keep organized and know what the class is for and what it does…

Maybe if on the Styles tab, instead of just seeing the wrench, maybe also a duplicate button? That way, when I go to use the “cloned” class, I would just have to start typing the name.

However, would be much more direct and intuitive if that ability was built-in to the class-naming spot.

It’s hilarious that it’s almost a year later and I just finished up writing a long post with the same exact title.

I think I’ve brought this up before but at some point would I think there needs to be a “duplicate class” option build in into Webflow. With being able to build more complex layouts with the introduction to Flexbox, and UI going more the way of vertical columns, I think this would be a great option to add into Webflow .

I understand you can go the combo class route but I honestly think it would be cleaner to just be able to duplicate an already existing class, rename it, and change options without having to rebuild it from scratch.

@vincent I understand what you’re suggesting and while it’s great for some stuff, I think, it would not be a very good solution for more complex layouts elements.

I can’t count how many times duplicating a style would come in handy. Whether it’s experimenting with different style choices or modifying styles from a duplicated theme, it’s a feature that I’m honestly surprised hasn’t made it’s way into the UX already. Definitely one of those “must haves” that all visual editors have. Wish we had it too.

1 Like

Another vote here for the ability to duplicate classes please…

1 Like

I think the problem is make Webflow’s code reasonable and structured, until it can be cooperate with other designer or front-end engineers. And make it can readable tomorrow morning. =)

It’s important make the class clean and readible!
For example,
I hv a button, class =“btn”
and when I want a new btn but color is white, if you hv no idea about “Saperation”, you will make the class =“btn white”, it’s unreasonable when you read and maintain this class “.btn.white”, because actually you do the “.white”, NOT “btn”.

so, why don’t we add a feature like,

Make the new Class can inherit Existing class But have different Name.

We want the class can be “predictable, reusable, maintainable, scalable”
and the duplicate class can help it much! Make Webflow go to next generation!

Cheers!

3 Likes

@webflow Please make this happen! Webflow is so painful to use when working on multiple projects. I feel like I could be 50% more efficient if we had features like this.

1 Like

This feature would be also very useful for me

Please consider that if you need to duplicate classes, there’s a chance you can achieve the same in a better way using nested classes and properly structured html.

If you have an item that has lots of the same properties, it’s helpful if it’s the same class. If you need to add some changes to its placement because of a different context, try to wrap it in another div which will be responsible for different placement. This will separate the “placement” from “style”. If you need to change the element itself you can add a subclass, for example ‘.social-buttons.in-footer’.

Duplicating classes with similar attributes could be considered as an antipattern in web developers world.
By limiting the options, Webflow is doing great job in helping everyone using it maintaining the CSS.

I agree with you now that I understand a little about semantic. But we still have problem to create interactions by classes so we need Interactions by ID or duplicate classes.

I just don’t see how classes with similar attributes could be an antipattern… As we do not have the duplicate feature, I am doing it manually and I just would never choose the complications inherent in nested classes… More here: Duplicate Style... Please! - #10 by uzzer