Replace classes on paste?

Design help General
1

Hello,
I am moving content from an old project to a new project, and upon pasting it, Webflow will automatically create copies of the classes (for example, since Class already existed, it created Class 2). Now I have a lot of content that is not following the rules of the new design, which I had already set. How can I tell it to replace “Class 2” with “Class” for all the objects that use it

Manually removing “Class 2” and putting “Class” back into everything is driving me insane and wasting so much time. Also how could I copy the properties of Class to Class 2 to make this faster?

2 Likes
2

No way (This is not modular). First the name “class” is bad / not semantic (If you don’t want rename issues - change the name before you paste) - if you use the new design elements and remove the old one - over time when you go to “remove unused classes” webflow remove a lot of styles.

image

The copy-paste won’t change your old design. Change “class” styles if you want (Only one time for all project).

In general, over projects if you use global styles for body, P, H1-H6, use swatches its more modular (For example set the font for the body - instead of changing the font for each element).

Put two divs one with “class” and the other with “class 2” on the same page - and manually match/compare the classes (Less than 1 minute for each breakpoint).

3

Hello Siton_Systems,
Thank you for your reply.

The issue I am presenting is one of experience design, in which Webflow does not ask how to treat pasting objects with the same classes applied to them in different projects. If it had asked me whether I wanted to replace the existing classes, keep the ones I already had or maybe merge them somehow, then it would be really great for the user.

One of the classes in my project is called “ImgTall” and it has created “ImgTall2”. Now, even if I try to rename “ImgTall2” to “ImgTall”, Webflow will still not ask me if I want to overwrite/replace the class, it simply says I can’t have two classes with the same name, which to me is causing a lot of trouble, because I have many objects with the same classes on this project.

Also, as a little bit of advice, you shouldn’t say some task “will take less than one minute for each breakpoint” if you don’t know the complexity of a project of how well the user is versed in a tool, context or task.

1 Like
4

Webflow is the only tool with copy paste. Copy and replace is mega feature with no way to know what you change in your project (very buggy for big projects = nightmare)

5

I understand the complexity of the task, and that is why I am suggesting that Webflow does not make a choice for me (like duplicating all my copied styles), but instead asks the user what to do. Webflow doesn’t need to be responsible for the outcome of every action, as long as the options are well explained to all levels of users.

2 Likes
6

Add wishlist about this topic. In my opnion copy and replace is to risky - but maybe it will be usefull for some users

7

Wishlist idea created - Ask user how to proceed when pasting elements from | Webflow Wishlist

8

Nah, copy and replace would be absolutely insane. I just don’t want certain stuff to be applied to certain classes, since im not only using Webflow, but also custome code. If i got an array of classes and want to switch certain ones with query selectors, i can only do that either with the import of some janky UI library or by explicitly naming every existing combo class on its own. Cant count how many times within a project iv’e wished there would be a copy-replace feature, i mean if you just plain code css your also able to just copy the div style propertys and paste it inside another class.

1 Like
9

It would be better if we would have a dialog which asks a user what to do in terms of a conflict. Because most of the time, a user would want to follow the style of the target.

Thus if we copy paste from A to B and we get a conflict. We would see, want ro replace style with target; yes or no. Where yes uses the classes from the target and No, will add the classes with numerical.

The comment a top of doing symanroc naming and what, is kinda of reply which doesn’t make sense and also doesn’t help the user with his question

10

@Siton_Systems
Why is it mega, its already knows there is a conflict. So it can easily just keep the classes as they would then be the same as the target. If a user says no, then it creates new classes.

How they implemented is already "mega*, because its basically doing more work, then what most users want most of the time.

It’s super simple to add. They already do the checks, it’s only an extra loop or nested loop

11

@Rombout
Suppose you copy a simple structure like this;

<div class="section-container">
  <div class="div-block-23"> 
    <h1 class="main-heading">Heading 1</h1> 
    ...

There can easily be hundreds of elements, each with a mix of classes.

  1. Some classes might be relevant and consistent between project A and project B, there is no conflict; the class name and definition match, it preserves the name.
  2. Most classes will not be relevant, or consistent, like Div Block 23, which was just automatically created by the system. If there’s a name conflict, it’s unlikely the definitions match, and Webflow will create Div Block 23 2
  3. Some classes might be relevant, and exist in both A and B, however the definitions are inconsistent between A and B. Webflow doesn’t know this so it opts for safety. In the case of a conflict, it assumes case #2, and creates a second version with the correct style settings.

Webflow favors #1 & #2 which are the most common.

#3 is less common because it’s generally unlikely that you’ll have two different identically-styled projects with absolutely identical naming conventions, and it would be exceptionally difficult to maintain that. If you really want centralized styling, that’s what component libraries are for.

Certainly there could be a “class reconciliation tool” where it lists ALL of the classes, shows which are new, shows which exist but match, shows which exist and do not match, and lets you choose class by class. But that’s a lot of UX.

An all-or-nothing dialog as you describe creates other risks of damaging the styling on the pasted content, and then good luck finding and fixing the problem.

Also, the problem of class duplication ( same same but different ) exists as a general design decay problem. You create a new Title 1 heading because you didn’t know Main Heading already existed and is what you wanted. It’s hard to track, especially has Webflow doesn’t maintain any association between element type and class list. Ideally when you drop a heading element, it would recommend 10 classes that are already used on heading elements. Same for tabs, buttons, divs, vdeo elements, etc.

I think I’d prefer it to paste exactly the right content with exactly the right source styling, even if that creates duplicates. I don’t want Webflow to break my design. But then to also have some form of “merge classes” tool which can be used for refactoring on any project.

Each class would have a “signature” based on its definition. Merge classes would list identical and similar classes, and let you preview impact, so that you know whether all elements with class X should be reclassed using class Y ( and X gets removed ).

Doesn’t exist now though.

For now, most devs use utility class design systems, where the class are all pre-defined and therefore always match. Much like Tailwind’s appoach.

Or they use custom classes and a Chrome extension like this one;

Or, there are a number of apps that are extending Webflow.
These are the ones related to classes.

image
image2031×1840 395 KB