The workflow is confusing and much harder to edit. The CSS code it produces seems fine, but editing and removing classes are painful.
Currently you cannot remove a global without removing everything else
in the list /chain first, as only the last class element can be removed.
You will always end up with a number of globals stacked when
abstracting classes.
Please make globals appear in the hinted list as I type them. That is
super important for workflow speed. As it stands you have to type the
entire global name for Webflow to recognize it and allow you to apply
it.
I love you guys! And I realize this has to be a monumental task to roll out all the new features. Please get this one right. Otherwise we lose a huge fundamental element of what makes Webflow a great rapid development tool for creating clean code.
Hey everyone, apologies for the late reply on this!
Webflow will now show globals in the auto-complete list as you type new classes, however these suggestions will be paired with a warning that makes it more clear that styles will be inherited.
I’m really sorry for the flubbed rollout of these changes without a proper announcement before hand. We’re working on modifying our development schedule and beta process to get feedback earlier in the process so there are no surprises.
As always, we’re thankful for the entire community for challenging us and helping us build the world’s best web design software. Keep the feedback coming - we’re listening!
I am really frustrated with this update. I have been waiting for 2 weeks to hear from you guys that now I can select the global class from the auto-complete!?! This was not the problem that we were discussing here.
In my opinion the problem is still there. You guys made a choice of not allowing us to apply 02 or more CLEAN global classes (the real ones… without being nested). I still don’t understand why the new class selector couldn’t embrace this option.
I have a page that I have been working on for more than 01 year. It is all built on the idea of having global classes that could be reusable, keeping my css as clean as possible. And suddenly you guys decided to remove this option. Ok, I can still use and keep my page on webflow, but my CSS will be as dirty as it can be now. Besides that, I feel that this update goes against moderns discussions about modular systems. It is a shame. I feel that you guys walked backwards in this issue.
It made me think that it is not safe to be all-in with you guys… I imagine if in the near future you release a change that cause a impact as big as this one in my workflow without further notice.
I have to say I’m with @thiago on this issue of the update.
I understand the frustration and the furiousness that this brings. I am currently also having the same issue where I have been spending lots of time (for a year now) relying, supporting and utilizing webflow to create the most important project of my life. To keep the code modular, scalable, reusable and clean I’ve also built the site upon the idea of mostly CLEAN reusable global class for use in assigning different elements … so it follows the DRY Css principles.
Therefore, I am afraid Webflow is currently sailing away from your guys promise and vision to provide a tool that utilizes web development best practices … that creates clean, modular classes/structure.
@callmevlad, @cyberdave and @webflow please, please and please don’t disappoint us and bring back the use of just assigning global classes for styling without having any warning, issues or having it nested.
I don’t want to see another amazing tool falling downhill like all other business failures / tools out there.
Hey @thiago@DesignerDiana, can you please send us some clarification on the “dirty CSS” point that both of you made?
This change does not actually affect the generated CSS, unless you actually add extra styles to when that combo class is applied. For example, I have a basic site with two global classes: “Red” and “Blue”. If I create a new element, and give it both the “Blue” and “Red” classes, it doesn’t actually generate extra CSS:
Another CSS selector .blue.red { ... } is only generated when I add extra styles to that “Blue + Red” instance (without affecting the global “Blue” style), which seems like desired behavior. You can still affect all “Blue” elements by using the selector menu and going up to it:
There is now a “Red” combo class being shown in the Style Manager, however that style will not generate CSS unless it has extra overriding styles (which it does in my second example).
So I’m trying to understand if there’s actually “dirty CSS” being generated, or if the issue is more with the new combo classes being displayed in the Style Manager?
I owe you a huge apologize for my last message. I assumed that the CSS would be exported with the same structure displayed in the Style Manager but I didn’t export the CSS to double check it. My bad.
It is exactly the way you described!! Thanks heaps for that
Ufff… I was desperate here thinking how I would clean the CSS after exported… I am relieved now!
Thank you for the screenshots. I guess this isn’t such a big issue after all. I too have misunderstood the announcement you made today about change #5:
Even though you can still use combinations of global classes in this way (by ignoring the warning), we strongly recommend that you do not reuse global classes for modifier/“combo” class names. It’s something that may be useful for very small sites, but can very quickly become a mess of CSS interdependencies and hard-to-debug specificity issues when your site gets more complicated.
Due to the above … I thought you were referring to the generated code. I apologize and I’m glad we were able to clarify everything. Thank you once again for the detailed screenshots … pictures are worth a thousand words!
Anyhow, the new combo classes displayed in the Style Manager is a bit misleading and if you guys have time on top of all other important features update / bug fixes please suggest to your design team to redesign the style manager a bit more accurate. It would save lots of frustration and display more clearly / clean.
Hey, I was wondering what screencasting tool on the market do you guys use? It seems to generate very nice gifs. It would be really useful when trying to describe a bug or for seeking help.
That is if it isn’t confidential and you guys are free to tell us.
The globals work slightly differently in the Webflow UI now, but the CSS code results are as they have always been with each discrete global declaration on it’s own and Weflow still allows you to stack them up
Webflow supports legacy files that have globals declared.
The only remaining difference I see now with this last update is the ability to individually delete /prune them from a stack.
There were several issues described in this thread, so if this isn’t what you are experiencing or having an issue with please clarify.
@vlogic, my axample, that I’ve seen reflected in Arthur’s comment, is related to targeting elements for interactions.
Let’s say I need to style buttons the same way, except colour. I would create a generic class button and add a specific class for each different colour. Being both global I could target these elements.
But now, I can no longer. They don´t show up in the interactions panel.
This is just o complement Arthu’s well put comment.
Take note that I have no technical training in CSS or otherwise.
After 01 week using it, I still think that it would be great to have the option to apply clean global classes to a div. It’s been really annoying the new workflow. It would be so great if as I type the name of a class I could have the option to choose : APPLY AS A COMBO CLASS or APPLY AS A GLOBAL CLASS …
I would love to get back to where we were before.
One thing that annoys for example:
1 - I applied 4 global classes to one element (fontsize-larger , u-text-center , u-marginbottom-60 and u-margintop-40
2 - But let’s say that I want remove just the u-text-center
3 - I can’t!!!
4 - I have to remove u-margintop-40, and then the u-margimbottom-60 and then remove u-text-center
5 - After that I have to retype u-marginbottom-60 and u-margintop-40 again
I was able to do that before you guys released this new class selector… Is there any chance you guys can consider having this option of applying global classes as they really are?
Thanks @vlogic . The example I’m sharing may seem a bit confusing at first because its structure is complex and I’m having many problems to implementing it, being this just one of them.
And then click on any of the Stickies in Column 2.
What happened? It opened both Content Panes for Columns 1 and 2 instead of just Column 2.
Why? Because now I need to recreate every instance of the Content Pane from scratch as a global class in order to be targeted individually by Interactions.
And I don´t want to do that because its unmanageable for this kind of site.
The way it used to work, confirmed by @Arthur, was to Style The Content Pane once and add a secondary class to individualize each copy for interactions (1, 2 ,3, 4, …). Simple.
But if I do that now it doesn´t work because Class 2 (or Content Pane + 2) is not recognised by the Interactions panel.
So you wanna say, that before update, you could point in the interaction element with 2 classes: ContentPane + 2 ? I did not. Same now. But if I will create global class “2” and use it like a combo for style element with class “ContentPanel” I can pick it in interaction panel.
Pointing in the interaction element with 2 classes: ContentPane + 2 ?
Maybe not. I’m fairly new to Webflow so I had the care to put it in brackets. But I could target the whole element by the next class (2) that individualized it. At least that´s what I recall and saw mirrored in @Arthur 's comment.
In any case, @sabanna, how would I go about your workflow / workaround?
Do you mean that I have to pick a widget for the sake of creating the class, give it a class name (2) and then erase it?
To then have that class ready to be combined as global to the Content Pane copy?
I’m sorry if I don´t get it and thank you for bearing with me.
