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

Source: WebKit Blog

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;
}

Because CSS styling is global, these styles will conflict, so we might use BEM to keep them separate:

/* 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 is fine, but on a large site with many components the naming can become unwieldy (.card__title--featured--main, etc.), adding cognitive overload.

Another option is nesting titles under different classes:

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

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

This works but adds specificity, which can lead to “specificity wars” as the project grows.

A third approach is using CSS modules that generate unique IDs for each class, but that introduces an extra tool and makes the resulting HTML less semantic.

Name‑only @container queries solve this problem.

What is the solution?

Name‑only @container queries are an upgrade of the traditional @container queries. Traditionally, a container query lets us style based on the width of a parent element:

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

The size condition (min-width) was always required.

With name‑only container queries, the size condition is optional:

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

Now containers act as a filter for specific use cases without the messiness of long class names or third‑party tools.

Example after adopting name‑only @container queries:

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

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

These look similar to nesting classes, but name‑only containers do not increase specificity. They act as a filter, making overrides easier without having to raise specificity.

How to use it

Step 1: Register your containers

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

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

Step 2: Scope your styles inside named containers

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

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

Browser Support

Currently, this feature is only available in Safari 26.4, but broader browser support is expected in the future.