Clean Styles

Organize and clean your Webflow class system—without leaving Designer. Scan for duplicates, merge into existing or brand-new styles, bulk-rename into folder-like groups, and optionally update styles inside Components. Built for speed, clarity, and safety.

What you can do

• Find duplicates fast: Identify identical styles across pages and breakpoints.
• Merge your way: Merge into an existing style or create a new consolidated style.
• Components aware: Optional toggle to apply merges inside Component definitions.
• Bulk rename into folders: Normalize naming and nest classes into folder-style groups.
• Combo Merge: Consolidate multiple combo classes into a single, clean style.
• Unified scan: Smart indexing targets relevant pages to keep work fast.
• Safe by design: Uses Webflow’s official APIs, batches updates, and respects Designer history.

How it works

1. Scan: Analyze styles in your project (optional one-time index for speed).
2. Review: See exact duplicate groups and suggested actions.
3. Merge: Replace duplicate styles site-wide into an existing target or a new style.
4. Components (optional): Enter component definitions to apply the same updates inside.
5. Organize: Use bulk renaming to align naming and create a folder-like structure.

Key details

• Designer-native: Runs in the Webflow Designer—no context switching.
• Non-destructive: Merges properties carefully and defers to your chosen target on conflicts.
• Breakpoints respected: Reads and writes per breakpoint and pseudo state.
• Performance first: Works in batches, prioritizes likely pages, and avoids unnecessary page switches.
• Clear feedback: Live progress and concise messages keep you informed.

Component handling

• Toggle whether to modify styles inside Components.
• When enabled, the app enters component definitions, updates elements, and exits cleanly.
• When disabled, elements inside Components are safely skipped.

What it doesn’t do

• No code injection or custom CSS rewriting.
• No external syncing or remote storage of your styles.
• No invasive UI or blocking dialogs.

Getting started

1. Open Clean Styles in the Webflow Designer.
2. Run a quick scan, select duplicates, choose your merge mode, and confirm.
3. Optionally enable Component editing to apply changes inside Components.
4. Use Bulk Rename to align naming and create a folder-style structure.

Tips

• Start with a targeted scan for faster results, then expand if needed.
• Use “merge into new” when establishing a fresh naming convention.
• Keep Component editing off until you’re ready to update inside Component definitions.