Name-only @container queries:
A solution to the naming wars

Introducing name-only @container queries, shipped in Safari 26.4. The new name-only query makes naming a lot easier with a feature that improves scoping without adding specificity.

What’s the problem?
You have a card. You have an article. And they both have titles. They each need their own styling — the article’s title is big and bold, the card’s title is small and quiet — but they’re both titles nonetheless.

We might start by styling the two different titles in two different files:

// article.css

.title {
  font-size: 1.5rem;
  font-weight: 800;
}

// card.css

.title {
  font-size: 1.2rem;
  font-weight: 600;
}

But because CSS styling is global, we’ll soon realize that these styles will conflict, so we might use BEM to help us keep them separate. Here’s what that would look like:

// article.css

.article__title {
  font-size: 1.5rem;
  font-weight: 800;
}

// card.css

.card__title {
  font-size: 1.2rem;
  font-weight: 600;
}

In a small project, this might be just fine. But when you’re working on a big site with a design system and lots of elements and their different variations all having their own titles, this naming can get out of hand. This is where you end up with the messy looking .card__title--featured--main kind of code. More cognitive overload to work with and more to read than we want.

Another option might be simply nesting the titles under different classes, like this:

// article.css

.article {
  .title {
    font-size: 1.5rem;
    font-weight: 800;
  }
}

// card.css

.card {
  .title {
    font-size: 1.2rem;
    font-weight: 600;
  }
}

That works too, but now you’re adding specificity which can lead to specificity wars as your project grows and gets more complex.

This is where you might choose to outsource the problem entirely to a CSS module, a tool that adds a unique ID to each classname, keeping everything nice and separate. The problem is that now you have a whole other tool you have to use, and your resulting HTML isn’t very semantic or even readable.

Name-only @container queries solve this problem.

What is the solution?

Name-only @container queries are an upgrade of the @container queries we’ve had in CSS for a while. Traditionally, a container query allows us to set a style based on the width of the parent element. It looks like this:

@container sidebar (min-width: 400px) {
  .card { padding: 2rem; }
}

This tells us that we have a container called sidebar and, at min-width of 400px, we could set the card’s padding to 2rem. The min-width is a size condition, and that size condition was always required when styling with containers.

Until now.

With name-only container queries, we don’t have to worry about declaring a size at all. Here’s the updated code:

@container sidebar {
  .card { padding: 2rem; }
}

No size condition, just a name. That means we can now use containers as a way to filter our styles for specific use cases without the messiness of long classnames or the need for third-party tools.

Here’s what our code looks like after using name-only @container queries:

@container article {
  .title {
    font-size: 1.5rem;
    font-weight: 800;
}

@container card {
  .title {
    font-size: 1.2rem;
    font-weight: 600;
  }
}

This might look similar to nesting classes, but it has a key difference: name-only @containers don’t add to the specificity. Instead, they act like a filter. That means if I want to override it, I can more easily do so without needed to make my styling more specific just to target that title.

You’re likely already keeping your styles separate by putting them in different files, but because CSS is global, it doesn’t know about that distinction. With name-only @container styles, you can bring the uniqueness of your filenames into the actual file and create separation for free.

How to use it

Step 1: Register your containers

.card {
  container-name: card;
  container-type: inline-size;
}

.article {
  container-name: card;
  container-type: inline-size;
}

Step 2: Scope your styles inside named containers

Now wrap each component’s styles in its matching @container block:

@container article {
  .title {
    font-size: 1.5rem;
    font-weight: 800;
}

@container card {
  .title {
    font-size: 1.2rem;
    font-weight: 600;
  }
}

Browser Support

Right now, this feature is only available in Safari 26.4, but we’re hoping for increased browser support soon.

Have thoughts on this feature? I’d love to hear it. You can reach me, Saron Yitbarek, on BlueSky, or reach out to our other evangelists — Jon Davis, on Bluesky / Mastodon, and Jen Simmons, on Bluesky / Mastodon. You can also follow WebKit on LinkedIn. If you find a bug or problem, please file a WebKit bug report.