I’ve searched the forum and can’t find an answer, so am hoping Webflow staff can shed some light on why Webflow is set up the way it is for global classes.
The developers I work with say that it is better and cleaner to set the styles at the global (“All”) level rather than making a new class for basic styles like H1, paragraph, block quote, etc. I agree with that philosophy. However, from a design standpoint, it is very tedious to have to always click into the Selector field and then scroll down and select the “All” selector before adjusting styles. See visual:
Besides being a tedious action, many times while in the flow of designing, it is easy to forget to do that and before I know it, Webflow has auto-generated a generic class name. When I realize my error, I have to go back, remove the auto-generated class name, scroll down to “All” and redo the settings – which may change depending on the responsive view – so that the styles are applied at the global (“all”) level. It’s very frustrating and one of the areas where errors can be easily made. I am not sure if others experience this but it is an ongoing pain point in the design process for me and the other designers I work with.
I am curious what is the reason for this tedious workflow? Is there a way around it? Are there plans to have the selector box auto-populated with the global class for improved efficiency and less errors?
It is likely because directly modifying heading styles is considered “destructive” to the design while working in WF. You may accidentally edit base style and end up with some unexpected inherited styles all over the place. But when you are specifically editing main headings’ styles you are usually more careful with your classes. In other words the problem you described (accidentally creating new style) is less destructive and annoying than the one I gave as an example (accidentally changing all headings everywhere on the site).
As a frontend dev and someone who just starting using Webflow this is taking some getting use to. Even if I’m being careful, I add classes accidentally because I’ve either selected a default html tag from the navigator or from the main screen and assume I’m styling that element. Instead, because of the default behavior, it adds a class to that element rather than styling that tag directly.
I understand that this protects the design when you have a large project, but perhaps make this a user preference setting.
I’ll echo the OP’s questions: I am curious what is the reason for this tedious workflow? Is there a way around it? Are there plans to have the selector box auto-populated with the global class for improved efficiency and less errors?
