The replies here capture some of the reasons. Like Geoff suggests, we need to establish containers explicitly – so there’s no avoiding that step, even if we used selectors in the @container syntax.

But also, names are optional, reusable across different elements, and one container can have multiple names. This adds a lot of flexibility.

You don’t have to give containers a name, and you don’t have to mention a name in the query syntax. When no name is added to the condition, the nearest valid ancestor container is queried. If you just want to know the most directly relevant context, leave off the name.
You can apply the same name to multiple selectors to create a ‘class’ of container. So you could add the layout container name to the main area, the sidebar, posts, grid items, etc. Then you can query the nearest layout container.
You can apply multiple names to a single container, to make it part of multiple patterns. So we could say the main area is a container that is part of our layout pattern, but also give it the name main, and the name color-context because it applies a unique color scheme. Now we can write some queries specific to the main area name, some looking for the nearest layout, and some looking at the nearest color-context – and the main area is set up to handle all those queries.

My guess is .post and container-name: posts; happen to use the same name in the example but in real world cases this doesn’t have to be the case and the same container-name will be used in multiple class selectors.

Selector “.posts” could theoretically target multiple HTML nodes, each having the attribute class set to posts. In that case it wouldn’t be obvious to determine which container’s width should be checked in the query.

I can imagine that the CSS property “container-name” serves to make sure that there can only be a single container with a given name.

That would be super cool and much more efficient. But I also get that there are things that CSS has to know up front, and one of those things is being able to match a container declaration to an element that’s explcitly defined as a container — not to mention what kind of query we want, whether it’s the size or style of that container. We have to tell CSS that so the browser knows how to match things up.

@container .posts (min-width: 600px) {
// applies to .posts
}

not snark, really trying to find the logic…