Working with style sync

If you are using pre-built components, they will contain classes. If the classes you are using have already been created in your Webflow project, a new class will be automatically created when you copy the new component into it.

You can compare this to a document repository:

- You have a PDF document named File.pdf
- Now you download another file with the name File.pdf
- To avoid duplicates, your second file is automatically renamed to File(1).pdf

In Webflow it is the same principle. A new class is created with a new name to avoid duplicates in the project. Likewise, your existing class is not simply overwritten, otherwise your configurations would be lost.

Unfortunately, this mechanism is a hassle when working with components. We always use the same classes, because we work according to the class System Client First 2.0 from Finsweet. This way we stick to a standard that is established in the Webflow community and it is easier for other Webflow developers to work with our products. Without Style Sync you would have to manually adjust the classes every time you copy a component into your project.

However, the style sync only works with GridUp components.

Enabling Style Sync

With Style Sync, the styles of the class are automatically synchronized with the styles you configured in the Style Guide when you copy them in. This means that GridUp recognizes that the class already exists in your Webflow project and instead of duplicating it, its styles are taken over.

You can find Style Sync in the Basics tab and you can switch it on and off there.

‍