IMPLEMENTED: Make the root selector in the CSS input interpolatable

Feature Requests / Improvements
1

The root selector in the CSS input is super powerful, but I don’t think we’re taking full advantage of it.

I’m proposing an interpolated version, which would be insanely powerful and scalable/maintainable, especially for BEM classes.

Let’s say we have a block with the class .product-card … here’s what we have to do right now:

root {
   style: here;
}

.product-card__heading {
   style: here;
}

.product-card__button {
   style: here;
}

This creates potential breakage if the class name is ever edited. Plus, it’s annoying.

This would be much more powerful (and way easier since you don’t have to remember the class names you want to reference).

root {
   style: here;
}

%root%__heading {
   style: here;
}

%root%__button {
   style: here;
}

The %% would effectively interpolate the root selector so that it can be chained to other extensions.

147 Likes
2

What a great request. :pray: Fingers crossed the power that be listen to this :crossed_fingers:

3

I would totaly love that! :slight_smile:

+1 for this feature request

4

Yes please. This is a great feature!

5

Yup, both Oxygen and Breakdance have this.

6

Yes, much needed feature for sure.

7

100% yes from me without any doubt

8

I Completely agree, I tried writing CSS this way inside the CSS editor because it felt natural that it should be this way. I was a bit disappointed that this wasn’t the default behaviour.

3 Likes
9

Oxygen definitely does not have this.

2 Likes
10

+1 from me, great idea for sure

11

+1 here as well. This is a GREAT idea!!

12

+1 for me. This is a great idea.

13

Missing this a long time. So +1 from me.

14

+1 yah… great idea :clap::clap:

15

+1. This will be so helpful that might open new doors to expand Bricks.

16

It does. Only works in CSS templates such as Easy Posts, though.

17

+1 for this request. Would be another great addition for an optimized workflow.

18

This is a no Brainer… Of cause 100%great idea…

1 Like
19

Yes. I couldn’t agree more. I wanted this to improve too. But I had no idea what to suggest.

20

Not sure I understand this but …

Does it mean I could create one class to act on a collection of Elements? Currently I add a class to each element which seems excessive work and means I have to hunt for the right part to update.

Has this been added to the Idea board so we can vote on it?