The new class selector

Community resources Product feedback
23

In the same swamp here. Please, either bring back the old crappy class control or allow applying multiple classes in an element.

2 Likes
24

We have the same issue as everyone else but I don’t think it’s really that broke.

For the few projects where we use webflow, we always create a style page that has all the individual element styles for reference as we felt this was the safest way to develop anything using webflow. So, a text block with the class of red would just have color:red applied to it. A block with the class of bg-black would just have background-color:black. etc etc. We can then apply multiples of these single classes to elements and they all get applied correctly. Start typing a class name that already exists and it shows on the dropdown. Select the item and the start typing another and it shows on the dropdown.

Until the latest update. The new interface still allows us to do this but it will no longer list classes in the dropdwon if they have not already been used as part of the current combo. ie Create a text block and start typing red and it filters the dropdown list and you can select red. Then start to add the second class to the element of bg-black. This doesn’t show in a dropdown and wants you to create a new class for it. It will then show on the droplet section, that lists all your custom styles, as a nested class of red. However, it does not create any extra bloated css. The output css file still only shows .red and .bg-black. My fear was that it would output both those single classes as well as a combined class and, therefore, introduce mucho bloat! But it doesn’t.

The only issues then would appear to be the fact that webflow suggests it is creating a new class, even though it isn’t and that the dropdown doesn’t show available classes if they haven’t already been used in combo that uses the same combination of css classes. There also seems to be an issue where the update has introduced some new default styled elements (input type=[submit] for instance) that can’t easily be overwritten. So it would be nice if these were fixed.

I hope this makes sense to someone!

5 Likes
25

If there is no going back with the new selector UI, maybe something like this would solve it. Hope Webflow finds an urgent and better solution

1 Like
26

hi @webflow

quick, work on this one How do I apply nested styles? - General - Forum | Webflow (since you were at it modifying the css selector)

I’m sure everyone will forget about this one if that one is made :smile:

thanks,
P.

27

The clean up function in the Styles Manager seems to be broken as well. I cannot get get rid off unused styles anymore. Once a new combo style was created it cannot be deleted anymore.

For example see the style “unused-style” in the Style Manager - although it is not associated to any page element it is not identified as superfluous and therefore cannot be deleted:
https://preview.webflow.com/preview/new-class-selector?preview=72875c979610398ea29d1e29ee987205

28

I think It doesn’t work this way @UrbansoulDesign

Following your example:

Considering that class .red is a global class and .bg-black is a global class

1 - You apply .red to an element
2. Then you type bg-black on the class selector
3 - It will create a nested class under .red
4 - You will think that it is working, because it in fact applied the black background to the element
5 - But what it actually did was creating a nested class with the same name (.bg-black) under the global class .red
6 - So now you have 2 classes .bg-black (1 global and 1 nested to .red)
7 - Now, as an experiment, try to change any style of the global .bg-black (let’s say that you changed the background color to a dark-grey)
8 - It will change on the global but not oh the nested (so you have a fake impression that it is working, but actually the .bg-black classes are 2 different classes… they don’t have anything in common, but the name)

That is why I don’t understand why this topic here was changed to FEEDBACK. It is in fact a BUG topic.

Does it make sense?

1 Like
29

I am sure that after the investigation by Vlad & Co the right solution will be there. This one, the previous or in between we shall see.

What i suggest: Make a good video with how we should work with classes for bigger projects! Me as designer and absolutely no coder… wants to now whats the right way to do things like classes and i am sure that i am not the only one!

1 Like
30

i believe the webflow guys will come around, stuff should be getting easier not harder.

31

This is the behavior I am experiencing, too.

At first it seemed that everything was copacetic (just like @UrbansoulDesign outlined here) but then I looked in my class tree and smacked my forehead. Then I moved on to another project elsewhere – hopefully to let the dust settle.

IMO, this was a huge oversight by Webflow – especially when priding their product as producing clean code.

At least they’ve acknowledged that they heard our complaints.

I’m hopeful that they will actually act on it in a timely manner.

3 Likes
32

@thiago @dkenzik We’re actively working on this, but in the meantime I wanted to clarify something. In the current code, creating a combo class that has the same name as a global class should still reflect all changes to any element that has that class.

For example, here I have two global classes: “Red BG” and “Black Border”, and I apply the “Black Border” as a combo class to the middle element:

638×535 1.05 MB

If I change “Black Border” global styles, it affects my second element as well. I can also add additional “global modifications” to just that middle element (e.g. how I changed the border width while retaining the type and color from the global “Black Border” selector), generating code like this:

So with that in mind, I’m trying to understand your points 7 and 8:

Are you saying that when you change the global “.bg-black” styles, elements with “bg-black” as a combo selector don’t get affected by that style change? If that’s the case, could you please send me a PM with ideally a set of steps that you’re taking?

We’ll update this post shortly with more detail, I just wanted to get some clarification on the behavior you’re currently seeing. Thanks!

6 Likes
33

@niels - We have a fix coming for this soon!

1 Like
34

Thanks @callmevlad !

I tried here and it is exactly the way you described! Now I can see what you guys are planning/doing! Looks great. This is a really good improvement.

Maybe I did something wrong but when I tried (it was yesterday), there wasn’t this message "This new class will inherit styles from the “Black Border” global class. This is new for me.

I am pretty sure that I tried to do exactly what you did but it didn’t work. But anyway, maybe it was a mistake.

I imagine that now the only thing that is missing is the option to choose if we want to make a COMBO CLASS or apply the global class independently to the element, I guess. Does it make sense?

1 Like
35

@callmevlad - With a new site, I was able to duplicate your suggested workflow, but not duplicate #7 and #8. So perhaps the “bug” was introduced into existing projects relying on global classes, for one reason or another.

The only possible issue I saw when reproducing your workflow was some potential orphaned classes.

Here is the gist:

  • Create three global classes: red, blue and half (50%/float:left)
  • Create two divs and give them .half
  • Add .red to the first half div
  • Add .blue to the second half div
  • Remove .red from the first half div
  • Remove .blue from the second half div
  • Style Manager.
  • Clean Up.

You should be able to clean up the two unused combo classes, right? It seems that is currently not possible without removing .half too.

Here is a quick screencast: http://quick.as/eo4jsvxvw

Perhaps that’s intended? It doesn’t seem too logical.

-Dave

36

@dkenzik Hey Dave, yeah the cleanup miss is definitely an issue that we’re working on! That’s a case where we were previously being too conservative unnecessarily, so look forward to a fix soon.

Thanks for the additional info! We’ll have a more thorough follow-up either later today or latest by tomorrow. :smiley:

3 Likes
37

Thanks for the screencast @callmevlad. That shows graphically much better what I typed!! And that message is definitely a new addition @thiago.

1 Like
38

Another thing, when writing a second class before he showed the options as you would writing, even global.

Now you need to re-write and do no wrong … in addition to re-write all over again …

Classes with big name was a good start and could just select when he had already found the class.

you get the idea?

1 Like
39

it is true @lucaspchara … this is annoying…

40

Massively annoying for a variety of reasons.

First, I have been questioning the concept of using this model of software delivery. While part of me is excited about the continuous improvements and added features, this little episode is an example of its only “exciting” when you find it an “improvement”. This is clearly not (at least not ‘as is’).

Second, the customer service aspect. So I had not made any changes in Webflow for a bit, I jump in and find myself so confused. “Why is this not working like I remember. Damn, did I forget what I am doing again! I see the screen has changed but surely they would not get rid of basic, long-standing functionality without notifying us?”

We know Webflow has the ability to send out emails, they had no problem sending me one last week about some new product. We know they have the ability to notify us when we log in “Since you last logged in …” Nothing. No advanced warning, no “here’s an upcoming change”. Instead, a silent rollout that causes quite a mess.

I can imagine that running a growing company like this is both exciting and exhausting at the same time. But someone should use this as an opportunity to look at how the current customer base is being treated and the long-term impacts of that approach. It may not hurt today but it will when some of your competitors catch up.

Cheers

(yeah, ending an email in which you told the person essentially “too bad” with ‘Cheers’ is inflaming, in my opinion)

2 Likes
41

Hey @callmevlad, sorry if I am bothering you, but I am just coming by again to ask if there is any news about this. I haven’t been working on my project for 4 days due to this change and it would be great if you guys could give us any idea if applying 2 or more global classes to an element will come back to the class selector.

Thanks! Cheers,

42

Would like to see a fix for this as well asap

3 Likes