Clearing out a style in Webflow can be a bit of a chore — especially when you’ve set values for a dozen properties or more.
Well, it “used to be” a chore. Because as of today, you can zero out a style with nothing more than an Alt/Option+Click.
Just hold Alt (on Windows) or Option (on Mac) as you click any blue-highlighted style and — bam! — the style is cleared. It works just like the style Reset button. And, as always, you can hit Command+Z to undo if you made a mistake.
@DFink and @Marxamus I’d like to get clarification on this. Do you want to clear all Margin/Padding, border, or border radius properties when clearing just one of them using CTRL+ALT modifiers? Or is there something else you’re thinking of?
“entire style” and “resetting the whole style” suggests that all blue (current combo selector + current responsive) on the settings panel will be cleared.
If we were to implement this, you might want to add it to the list of options here like this:
So it is a kind of a “short-cut” for “Remove this style” button, right? Great!
BTW, can I copy all the properties of a class into another class? Or duplicate a class? Sometimes I like to have a few variation of a class and I have to write down and give all the properties of the class for each variation.
Would you all expect the “hidden” styles in all the hover/focus/pressed states and all media queries to be cleared as well if you clear all styles from a class?
Let me try to clarify. Sometimes I go through and add a bunch of styles to both the default and hover states and decide I want to start over but I want to use the same class name. That leaves me to go through and “remove this style” on everything blue. I’d love a complicated key command with something like 2 modifiers to do this (to avoid accidentally doing it). What @samliew has above would work too with the dropdown to reset the entire style on a class/subclass basis. That might actually be better because you wouldn’t have to manually select a parent class to reset the style on it while editing a subclass.
I hear you @vincent, but from what I gathered interactions identify objects to apply actions upon, by their styles only (not by ID). So sometimes I find myself creating similar objects with similar class just to be able to apply specific action action to each one. Once I learned to use “limit to nested elements” it solved some of the cases but not all. Did I made myself clear?
So let me give you a trick I found, in order to target an element with multiple classes.
Say you have this popup that you want to target with an interaction. You can build it from scratch in order for it to have a unique “NewPopup” class. But you could reuse an existing element, who already have 2 classes: .popup.big.
Do it anyway, re-use that popup and surcharge it with your new class, you end up with .popup.big.newPopup
Now, just before starting to build your interaction, drag a dummy div, or anything, in the designer. Then give it the simgle class .newPopup.
Build your interaction, call .newPopup in the “Affect different element” dialog, it appears, select it. Build your interaction. Now before testing it, you can delete the dummy div (or any other element) you used solely to affect the class you needed to target.
Test your interaction, it indeed is targetting .popup.big.newPopup
Hope that’ll work for you I have to say most of my interactions target elements with many classes and I never had a trouble.