Class editing auto-select is a footgun (unclear class vs element styling scope)

[ericwang401]

Describe the Problem

Elementor's class editing UX makes it too easy to accidentally edit a CSS class when you think you're editing the element.

When I add a class in the Classes field, Elementor auto-selects that class. After that, any changes I make in the styling pane are scoped to the selected class, not the current element.

This is really easy to miss. Yes, the class pill gets highlighted, but the styling pane doesn't make it obvious enough that I'm no longer editing the element. The result is that you only realize what happened after the fact, when you've unintentionally modified a utility class and it ripples across the entire site.

This is especially dangerous if you're using classes as "utility tokens" (e.g., text-4xl, tracking-tight, text-muted-foreground), because those are meant to be stable and reused across many elements. One accidental change silently breaks a bunch of pages.

Propose a Solution

1. Stop automatically selecting a class when it's added
   Adding a class should not change the scope of where styles are applied. The default should remain "edit this element".

2. Make the current editing scope extremely obvious
   If a class is selected, the UI should loudly indicate that:

   • you are editing a class (global)
   • not the element (local)

   This should be visually distinct enough that you can't miss it.

3. Require an explicit action to edit a class
   Editing a class should be an intentional mode switch, not an implicit side-effect.
   For example:

   • a dedicated "Edit class" button on each class pill
   • or a separate panel / modal for class editing
   • or a lock icon for "utility" classes that prevents edits unless unlocked

4. Add an escape hatch / undo guardrail
   If I edited a class and it impacted X elements, show a warning/toast and offer an easy way to revert.

Additional Context

This issue is basically the same category of problem as "editing global components accidentally" in other design tools: the scoping needs to be obvious, and entering global-edit mode needs to be explicit.

Right now the workflow feels backwards:

• I'm trying to style an element
• I add a class name as a tag
• suddenly I'm editing the class globally without intending to

Agreement

• I confirm I have read and followed all the guidelines and instructions outlined in the Feature Request form.
• I agree that my discussion may be closed without further action if it doesn't meet all the requirements outlined in the Feature Request form.