Why I Am Not A Fan of CSS Container Queries

If you’re reading this, you know what CSS container queries are. I’m not going to go into why they’re so important and so special and why everybody is talking about them. You know what they are. There’s no need for an introduction.

But I’m not a fan of them.

Thanks Obama, you get it.

Well, at least I’m not a fan of the syntax of them.

I could understand the syntax of CSS custom properties (var(--this-is-fine) ) and I guess I can embrace the wonky syntax of CSS grid (grid-area: 1 / 1 / span 1 / span 3 ). But container queries’ stupid syntax is where I draw the line.

To start off, if you’re setting up a container query you need to the contain property to the element, and it needs to have the value of layout inline-size style like so:

.container { contain: layout inline-size style }

(Some docs say that only layout and inline-size are needed, but in every example I found, the only way they worked is with the style value included. Think of it as the Heart Ring in Capitan Planet. Useless but required.)

(I even had to add it to Smashing Magazines’ pen, which was weird because they…