Making templates work with container queries

UX
1

I want to refactor some component templates to better support container queries. And I’ll need to add some additional wrappers, as I couldn’t query a container against itself. But if I do this, I wonder how to best name the wrapping elements. Looking at my templates my usual naming puts a wrapper element as the outer one and a container as the inner one.

.component {
  &__wrapper {
  }
  &__container {
  }
}

This seemed to make good sense. But for the container queries, I’d always need to declare the outer element as the container. And it will not be quite so intuitive if the wrappers are declared as containers. This looks just much better:

image

So I wonder if someone thought about a convention or a good approach here already? Maybe I’m overthinking this :thinking: but it’s a breaking change if I refactor templates, so I wouldn’t want to just shoot from the hip…

1 Like