I’m trying to up my game diving deeper into combo classes.
I cannot seem to get my combo class to inherit/affect my base class.
Easier to explain with this Loom video:
Thanks for any help!
Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])
hi @zac not big fan of this kind way of spacing system. But what I see and works for my example is this principle.
create a INIT BASE OF LARGE MARGIN by creating “margin__large” with eg. 3rem on each side.
add to identical element combo class “margin__bottom” and set explicitly all to 0 except bottom.
That’s it for creation of template and it is ready to use on any element as margin__large margin__bottom .
The confusion can be that he/she is using “margin__bottom” first and “margin__large” after. There is slight difference but my guess it that only reason to place classes in reverse order is to have “margin__bottom” shown in NAVIGATOR on element.
BTW: Im not a WF team member as this forum is run by WF users. If you need help from WF team you should contract WF support.
Thanks @Stan! I agree that it’s not the most intuitive system, but wrapping my head around how it works is what’s tripping me up. After inspecting the classes in the template I’m referring to, it looks like there is in fact a “base” structure of Margin Top Margin Bottom etc.
If you feel like sharing, I’d like to know what your spacing system looks like.
Thanks again!
P.S. I realize this is a forum. My Loom video was originally created for the support team, but then I saw they have added a built-in screen record function when submitting a ticket.
I thought I had it, but I’m getting a different result following the same process. Here’s another Loom video.
hi @zac I have stop watching the video after 1min because you starting from wrong spot.
You are creating first “margin-bottom” (with no value for bottom) instead of INIT state that is “margin-large” that you will modify later under different class name in combo.
create INIT selector “margin-large” with eg. 5rem for each dimension TRBL.
add combo selector “margin-bottom” and force values on TRL to 0
when you have your selectors set delete this div element
add a new div and use your selectors in any order
@Stan, thank you so much for taking the time to drill this into my thick skull. Please take a moment to watch this hopefully much more succinct explanation.
hi @zac instead of long explanation how combinators works the best way understand will be read CSS documentation on “combinators”.
In short these are some way “conditional” selectors means style is applied only in certain condition.
(first column will explain it all)
Combinators are handy in certain situation, unfortunately WF use these as standard that is not common in code world.
This is good stuff, and I agree…essential knowledge. But what I want to understand is how and why the combo class behavior is acting the way it is in Webflow — why in one instance the combo is inheriting the correct attributes, while in another instance, it’s not.
because of PARENT selector (as in documentation). That is why I have posted that your INIT (parent) should be “margin-large”.
Yet it works in this instance where margin-bottom is the parent/base and margins-small is the modifier. That’s the part that’s so confusing to me.
If I reverse it and make margin-large the base (parent?) and make margin-bottom I’m experiencing the same issue.
Clearly I’m not a developer, so I apologize for pulling you down a rabbit hole that probably seems silly to you. 
Hi Zac, the method to learn this level of detail is-
It’s the only way to really understand what Stan has shared.
However zooming out on this, it looks like you’re wanting a utility class framework. I haven’t tried either of these, but I encourage you to check them out.
Understood. Time to study. Thanks @memetican, and @Stan. 
You’re a saint for taking the time to create this. Thanks again, @Stan. I’m going to run through that exercise. And @memetican, MAST is awesome. I’m seeing the light.
I’m sorry @Stan and @memetican…I thought I understood how this works, but it turns out I’m still lost. If you could please help me understand how to get my combo class to inherit the attributes of its base class, I’d be forever grateful.
Here’s my Loom video explainer.
Here’s a link to the FinSweet Style Guide referenced in the video.
Hey Zac, at a glance I think you are mixing combo classes and global classes, which I think combine differently.
You’d have to look at the published HTML and CSS in order to understand the exact specific differences.
Two more tips-
When you see blue, that’s an explicitly set value, so a blue zero and a white zero are not the same thing in the rendered CSS. Blue will override other things, white will inherit.
When you see orange, it can mean many things, but the setting is explicitly set somewhere else. either the setting is on a different breakpoint, or a different class, or it might be set in a style embed. Webflow is aware of it, but you might have to dig to find it.
Personally I don’t trust the designer’s information 100%, because I’ve seen occasional anomalies. The only Truth is the CSS, so publish and learn to examine it.
agree with @memetican
