Reference Styles

Reference styles let Convertex know which CSS classes already exist in your Webflow project. Instead of creating new classes, Convertex reuses the ones you already have.

---

Why Is This Useful?

When you add content to an existing Webflow project, you do not want Convertex to create duplicate classes. If your project already has a .button-primary class with the right styles, Convertex should reuse it instead of creating a new one.

Reference styles solve this problem:

• No duplicates: Convertex detects existing classes and reuses them
• Visual consistency: new elements use the same styles as the rest of the site
• Less cleanup: no need to delete duplicate classes after pasting into Webflow

---

Importing Your Styles

---

How Does It Work During Conversion?

When you run a conversion, Convertex compares each CSS class in your code with the imported reference styles:

• Match found: the existing class is reused as-is, without creating a new one
• No match: a new class is created normally

---

Highlighting in the Editor

CSS classes that match reference styles are highlighted in the CSS editor. This lets you immediately see which classes will be reused during conversion.

---

Typical Use Case

You have a Webflow site with 200 classes and you want to add a new section. Without reference styles, Convertex would create new classes that duplicate the existing ones. With reference styles:

1. Export the styles from your Webflow project
2. Import them into Convertex
3. Code your new section
4. Convertex automatically reuses the existing classes
5. Paste into Webflow: everything is consistent