Webflow Class Guard

If you've ever accidentally changed a global utility class in Webflow and not noticed until three client revisions later, this extension is for you.

Webflow Class Guard protects your most important CSS classes from accidental edits inside the Webflow Designer. When a protected class is active in the style panel, a visual lock overlay blocks all style inputs — so you can click around, select elements, and work freely without the risk of breaking a class that's used across hundreds of elements.

No more "who changed .u-container and why is everything 40px off."

THE PROBLEM

Webflow's global class system is both powerful and dangerous. Every style you apply to a class is shared by every element that uses it. A single accidental click on the wrong class pill in the selector bar (followed by a stray keystroke or a spacing adjustment) can silently break your entire design system.

Webflow has no native way to lock a class. There's no "protected" flag, no write permissions per class, and no undo history that persists across sessions. If you catch the mistake in the same session, you might be able to undo it. If you don't, you're comparing styles manually and hoping you remember what it was supposed to be.