Classes versus nested classes

So I’m still new to Webflow and amy trying to iron out the classes vs nested classes. So I want to create a “section” class to handle padding and then create “container” class to handle margin and centering. Then I want “white-font”, “brown-font”, “black-font” classes but I don’t want them tied to a Header class. Is the best way to create an Header block, create the color class and then delete the block.

Will that let me assign the classes as H1, white-font and H1,black-font?

Hi Jason, I am not sure how other people go about doing it, but it is a really great question.

I usually end up creating an extra page that is a sea of empty divs with just those global properties… I park copies of my global abstracted properties I am going to apply to multiple objects. Then when I use Webflow’s auto clean up, I don’t accidentally delete something I went to great pains to create, if it is not currently used.

To start, I think about class structure as I go and create base placeholders of what properties I want to make global. Some of it happens later when I decide that it would be an advantage to single out a property, so for me, jumping back and forth to the global abstracted junk pile of divs is not really as tedious as it sounds.

It is still a bit more challenging than it would be directly in a code editor, but webflow affords a zillion other advantages. I frequently export my code and look over the CSS to see if I have elements of those classes that have unnecessary duplicate properties or weird structure. Then I can go back into webflow select my global class from the dropdown and easily clean them up or part them out using the blue and orange property (inheritance) highlighting that shows up in the designer.

Would love to hear other peoples approach - I am sure they will have better advice :slight_smile: This would be a good subject for a tutorial from one of the experts as it has been one of the bigger challenges for me to sort out in practice.

1 Like

One of my biggest challenges with working with global classes is being able to select them in isolation across devices. They are usually glommed on to the instance as a list and the individual global cannot be selected in isolation.

solution:

  • place a temporary div on the layout
  • apply the global class
  • make any tweak to it on the media query / device size you need to tweak
  • that global is now accessible in isolation from the dropdown.
2 Likes

I’m also wondering about this (if I have understood the question correctly). I’d like to be able to, for example, create a class called “box-shadow,” which I can apply to either a section, container, or other element, as a sub-class. However, after I create a sub-class (combo class?) for one element, then I don’t seem to be able to select the sub-class for other elements.

Is there any advanced tutorial or other instructional information that explains, in general, how to work with classes and, specifically, how to do what I’ve described?

Thank you!

Hello there,

Old topic but I think I have the same kind of question here.

This css thing with webflow is the last dark part I can see in this awesome software.

What is the classic CSS workflow considering we should not use IDs and the classes we define are (almost) automatically nested ? I started defining my css attributes separately but it almost always become nested and not reusable in other

Thank you