# Making templates work with container queries

**URL:** https://meta.discourse.org/t/making-templates-work-with-container-queries/355883
**Category:** UX
**Created:** [March 5, 2025, 4:40pm UTC](https://meta.discourse.org/t/making-templates-work-with-container-queries/355883 "2025-03-05T16:40:25Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [March 5, 2025, 4:40pm UTC](https://meta.discourse.org/t/making-templates-work-with-container-queries/355883/1 "2025-03-05T16:40:25Z")

</div>

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.

```scss
.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](https://global.discourse-cdn.com/meta/original/4X/9/9/1/991ffb15637eff95bcd1640582314e5b461d1107.png)

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