Parent classes / more complex selectors

Feature Requests / Improvements
1

Real life use case scenario:

I’m a website guy. But there’s also “content guy” and my job is to make his life easier. Our company organizes summits. There’s a lot of sites every year and on every site there’s always two sections - list of speakers and program that also contains speakers, but smaller versions. For now we use Elementor (free version) for 99% of our sites, which I personally hate. For “speakers” I created my own widget there that we use in both sections - speakers and program, but with different styles that I predefined. Here’s how workflow of our “content guy” looks like:

  1. First he creates list of big speakers in “speakers” section.
  2. After he did some calls and recieved confirms from speakers, he need to put those speakers into program.
  3. He copies big speaker from top, pastes it into program.
  4. Then he copies styles from other small speaker in program, where I already predefined that “small styles”, pastes that styles into new big speaker he just copied - voila, new small speaker in program.

Content guy holds to that “copy paste” mechanics with his claws for one good reason - he don’t have to create speaker twice, find photo in our library and fill all the fields again. He can just “copy paste” speaker from top, then “copy paste” styles. This saves time.

Now, how his workflow will change in Bricks if we’ll switch. Obviously, I would prefer to use components for speakers instead of writing my own widget. And here’s what this means:

  1. There’s no “styles” tab for components and they probably don’t need one. So you can’t copy-paste styles here (thank god, I hate copy-pasting when it comes to styles).
  2. So, we need one group of speakers styled one way and second group styled other way. This means two different components, right? And this means twice more components for content guy to fill.

So I thought - we don’t need two components, what about parents? And for now I solved this problem with some custom CSS inside component. Let’s take photo as example. On big speakers it’s big, round and has border. But when it moves into program, I want to change that. So I did:

.program-wrap %root% {
  width: 100px;
  height: 100px;
  border-radius: 0;
  border: 0;
}

And this is perfect - one less step for content guy, because he don’t have to ungodly copy-paste styles anymore. But now it’s more steps for me, because there’s not only photo, there’s bunch of elements in “speaker” component and now I have to write custom CSS for each of them. But I want that “visual editing comfort” too. So I thought, maybe “parent class” could be a feature?

There’s already classes, so is it possible to give us opportunity to add spaces in their names? Then I could set two sets of styles for two selectors: .speaker-photo and .program-wrap .speaker-photo and actually use Bricks to click my way through styling process.

Maybe in future “classes” feature could change in to more complex selectors. Like:

.parent > .child
.parent:has(.some-other-block) .child