Global Classes used as Combo Classes

Community resources General
1

Hey folks,

I’m trying to get my head round something regarding Global & Combo classes.

If you create 3 separate global classes and then apply those 3 (non conflicting) classes to an element, that element inherits from 3x global classes.

But in the style manager panel 2 of those Global Classes show up nested underneath as ‘combo classes’.

Why is this? I would have thought of a combo class as only something that’s nested within the ‘parent’ of a global class.

But it looks like a class can live as it’s own Global Instance and also as a Combo Class Instance?

Thanks in advance for your help! :smile:

See image below.

Global%20%26%20Combo%20Classes
Global%20%26%20Combo%20Classes2605×782 136 KB

1 Like
2

@jmw may have answered my own question here actually.

But would be good to still get your clarification on the logic of all this and why it’s laid out like that in the style manager.

Many thanks dudes, :slight_smile:

3

Maybe this will help. The CSS tab isn’t super helpful at making you understand what’s in the actual CSS.

http://vincent.polenordstudio.fr/snap/Webflow_-__Classes_and_Combos_2018-08-02_15-57-03.png

http://vincent.polenordstudio.fr/snap/Webflow_-__Classes_and_Combos_2018-08-02_15-59-55.png

And see it in action here:

3 Likes
4

Perfect Vincent, thank you. That’s what I was hoping. I appreciate you making it so clear.

That page looks really helpful too. I’d actually looked through your website before, but didn’t find that one there.

FYI - the link back to your site on that particular page links to inb4.webfloow.io.

All the best man,

5

Sorry, I believe, the explanation in the file above is not correct. There’s no such thing as “combo class” in CSS, but there’s a selector of .classA.classB type pointing to an element that has ALL the classes listed in its description. In no particular order, maybe with another class listed between the entries.

P.S. There’s also a typo in the example B in “Global classes, Combo classes and Specificity” chapter. should be discreet instead of stand-out. Because of overwriting by selector’s declaration, the result text would look 10% and underlined (the latter goes for Example C as well).

And again, I believe, the explanation behind the example is not correct. it’s not a matter of “priority”. It’s a matter of finding both classes in an element. When a browser finds such an element, it applies the properties of .classA to it, then the properties of .classB, and finally the properties declared for the selector .classA.classB itself.

I think, this is not a very intuitive concept, but it seems this is how it works.