I am now studying requirements for Webflow Portfolio examples and one of the requirements is that “Combo classes don’t go more than two levels deep”.
I have been using combo classes and these are great, but sometimes I need to use more than 2 levels, for example:
Heading 1 → Black → Centered
Or for example Button → Primary → Small
The rationale for using this convention is that if I need to edit all these values, I only edit this one place, but then again, Webflow says it shouldn’t go more that 2 levels deep.
I watched the tutorial on Classes and it does not mention a single thing about two levels and actually is using 2 combo classes as per example.
Can someone please shed some light on this?
Many many many thanks!
Hi, can anyone help with this?
Sorted. Completely forgot, that parent element can carry styling which can be applied to children.
This way if I have global H1 as Black, I can create another class H1 White and nest it in the parent element with class Centered - sorted. No need to reply.
I thought 2 levels deep doesn’t count first class - as it is main class then +1 first level +2 second so no more then 3 classes total per object. So it is not the case? max can be only 2 classes per element? (not global)
The statement “Combo classes go no more than two levels deep” suggests that you can have a primary class and up to two levels of combo classes below it.
- Primary Class: This is the top-level class.
- Combo Classes: These are classes that are nested under the primary class.
- “No more than two levels deep”: This indicates that you can have the primary class, followed by up to two levels of combo classes beneath it. Beyond these two levels, you may not have additional combo classes.