Here’s a suggestion to improve the UI by avoiding confusion. This confused the hell out of me at first, and although I get it now, it’s still unintuitive and I sometimes slip up and inadvertently remove all styles from the class I’m working on.
The problem: the element class/ID field/dropdown shows an “x” icon. The function of this to clear all styles from the currently selected class. In the dropdown, for the currently selected class (and all classes added to this element) there’s also the same “x” icon, but this time it’s a completely different function: remove the class from the element.
Solution: 1) Use different icons…I suggest using a “pencil eraser” for clear styles. 2) add to the element class/ID field the icon for remove class (so we don’t have to show the dropdown, find the class and click the remove class icon). So the field would have both “clear styles” and “remove class” icons visible without needing to show the dropdown (both with their respective different icons).
100% agree with this! I guess it’s a small tweak for the dev team, but a huge UI improvement that prevents confusion. I wrote about this same thing in the facebook group but it was bombarded with other things and my post hasn’t been really noticed, so I’m glad this issue is properly introduced here, on forum. I hope they will fix this.
For 1), I personally agree 100%.
2) How should this be handled if you have more than one class on an element (which is actually always the case due to utility classes)?
Simple. The remove class icon within the field (next to the current “clear styles” icon would remove the currently selected style. In my example above, it would remove the class “active” from the current element.
After clicking the icon, the element would show the element’s ID in the field.
I so agree with this, current UI is very confusing and not consistent between ID/class field and class dropdown, and I often end up erasing class styles by mistake too
@ainom proposition seems perfectly healthy and handy, please go for it!
(by the way, clear icon in class list is a turning arrow, so I would use the same instead of a new eraser icon)
I would also use the same tooltip label, like “clear styles”.
I found a workaround for all those like me who use many classes with elements and want at a certain point to delete all of them in one shot without deleting one by one.
You should create a fake class that does nothing, name it whatever you want and consider as a temporary class that we will eliminate later, eg: “erase-class”
Apply it to a fake element eg: a div a block or whatever, over to this element open contextual menu and click “Copy styles”.
Go to the element you want to clean up from classes, hover it and again through the contextual menu, click “Paste styles”. You’ll see that now that element receives the fake class name we created, and the rest of the old classes no longer belong to the element. Repeat this for how many elements you need to clean up.
Once you’done the last operation is to eliminate globally this fake class name so simply go over to an element click on the ID/class panel the whole classes list opens up. Search for the fake class name and click on delete (trash can icon).
Done!
Repeat the operation when you’ll find yourself in the same situation with other elements.
