The new class selector

@callmevlad

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 :wink:

Ufff… I was desperate here thinking how I would clean the CSS after exported… I am relieved now!

1 Like

Hey @callmevlad,

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! :smiley:

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.

Thank you very much.

Work greatly appreciated! :smile:

1 Like

@thiago @DesignerDiana Whew, thanks for the clarification!

1 Like

@callmevlad

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. :wink:

It would help me out.

Thanks for everything.

1 Like

Can anyone tell me how do get around this issue.
If I missed it in the thread I´m sorry.
@callmevlad

I think in general everything has been fixed.

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.

1 Like

@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.

Sorry @Ricardo, I assumed that one had been addressed in the update as well. Have not tested it.

Would it be possible for you post a simple example - I would like to try a hack workaround with nesting.

@Arthur, can you confirm if this is still a hiccup for your workflow?

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 :frowning:

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

5 Likes

@Ricardo, I am able to target any global class through interactions, though I may not be approaching things the same way? Is this still an issue?

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.

But lets try it.

First point your cursor here please:
http://evolution-board-new.webflow.io

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.

Hence, all Content Panes open.

I hope I made it graspable this time.

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.

1 Like

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.

Exactly, Ricardo :wink:
Lets call it “dummy element” . Usually I take a div, give it class. Then remove class from div and give it another class, and do this as many times, as many classes I need. All this classes will be GLOBAL. But I can use them for make combo classes too. And they will be available in interaction panel.

Also you can just take element that you need to specify with some other class, for example “ControlPanel” you want to style with class “Two”. If class “ControlPanel” already exist, remove it from element (not remove class at all), give element class “Two”, then add class “ControlPanel” (or in different order). In this way both classes will be available in interactions

Hope I could explain correct.

3 Likes

+1 (and I guess thirty zeros so I can actually post.)

2 Likes

I just found out another huge problem of this new class selector.

Now if I want to rename a global class, and it was previously applied as a combo class, I will have to rename the global class and all the instances of this global class where it was applied as a combo class !!?!?!

OMG :frowning:

It is common for me to change the name of a global class as my project evolves… It is almost impossible for me to do that now… Since my global classes were created to be reusable, now that the class selector changed, I have some global classes appearing in more than 20,30 combo different combo classes…

Is there any possibility that you guys will solve this issues @callmevlad ? I am sorry to bother again with this, but I still can’t understand why the changes you guys pushed recently had to eliminate a whole workflow of projects like mine … I still think that this release should propose something new but embracing this kind of workflow at the same time… I can’t see why for you guys the combo classes logic has to be conflicting with the idea of reusable classes…

thanks

3 Likes

Thank you for sharing @sabanna. They came really handy!

1 Like

I have noticed this also when playing with the new selector. It breaks the association of that instance entirely and starts from scratch wiping all properties. BUT the behavior is not a constant. According to how the order of combo classes are stacked. I am re-testing from a very simple scratch build, because I think I am getting several different outcomes upon renaming:

  1. Renaming destroys all properties in the class under some circumstances (a clean wipe).
  2. But, renaming does not always affect all instances of that global class.
  3. Clones - or same stack order combos inherit the destruction / wiping upon renaming.
  4. Any shuffle of the stack order of global combos behave independently (Combo Stack A does not alter Combo Stack B).
  5. Editing the name of the original source div I used to create the global promotes proper inheritance behavior.

Deleting my previous comments - not efficient - sorry. I am off to test this from scratch and will post a cleaner test case for each. Please do the same. This is super important to know exactly what is happening and get a clean result and resolution / support for any issues.

1 Like

Renaming a global class is destructive and will break in all cases as the warning in the style manager indicates. This is not a desired behavior / outcome.

Other random behaviors are not present in a new build. I see some additional warnings, so I assume some of this is actively changing.

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.