Using New Global Styles Best Practices Question

Hello, I’ve been using legacy Global Styles in GenerateBlocks. I’ve read about the new system and I think I sort of understand it but not fully, and I’m not sure if I know how to best use it. The biggest area of my confusion is that the new system appears to no longer be tied to specific types of items (like containers, buttons, etc.)

I’ll describe how I’ve been using the legacy system and how I’m trying to transition to the new system without losing or messing up anything I’ve done so far. But I’m wondering if there is a better way to use the new system going forward since it’s not tied to items, or if my plan is the way to go.

Sorry for the long message, but I don’t know how else to ask the question.

Here’s how I’ve been using legacy global styles:

I have 9 legal styles for containers. This is to add variety to the look and feel of webpages. Here’s how it works.
1. I have three wide containers whose purpose is to create a background color that spans the screen: main white, main dark blue, and main light blue.
2. I have three narrower containers where I add text with narrower margins on a page: black text (for main white background), white text (for main dark blue background, and black text (for main light blue background). For example, if I want a section on a page with dark blue background, I’ll add the main dark blue background container and then inside that I’ll put the white text container (which also has a dark blue background but narrower margins).
3. 3 more containers, basically the same as number 2 items but wider margins then number 2 (and not as wide as number 1 items).
How I use this? I simply pick a wide container from number 1 and then either a container from number 2 (if I want narrower margins) or from number 3 (if I want wider margins).

I also created one global style for buttons, so far. I’ll probably create other button styles later.

Here’s what I’m doing to migrate:
I’m simply recreating all 10 of these global styles (9 containers and 1 button) and then going to each individual block, choosing the new style, and then unchecking the legal style. This appears to keep everything the same as is.

What I’m not understanding.
What I don’t understand is whether I’m doing this the best way or is there a better way? In particular, I see on the global styles page that styles appear in order from top to bottom.

I’m also confused because, when I go to apply a new global style to a container, it shows all the new global styles I’ve created, including the style for the button. But I’m styling a container, not a button. What am I missing here?

I hope this question makes sense.

Thank you.