One annoying thing with container queries is you often end up with an extra div to define the container, sometimes wrapping each flex or grid item.
-
One annoying thing with container queries is you often end up with an extra div to define the container, sometimes wrapping each flex or grid item.
It's not terrible, but I wonder what you think about doing this as an alternative.
It depends on what you're doing, but I think it makes sense for this type of thing.
I can't think of an alternative that doesn't require an extra div *somewhere* to define a container, which maybe I'm avoiding for no valid reason here?
-
@kevinpowell I mean, the basic principle of not having extra markup seems totally reasonable. With that said, philosophically, It would seem as though if you need to add an extra container to do a thing that requires a container query, maybe the problem/solution isn’t what was originally thought?
It *feels like* CSS is designed with the notion that you don’t need to mark up the data to do stuff, but it also feels like container queries are different. ::
-
@octothorpe The main issue with container queries are they can't query themselves, which is the same limitation as a media query really, just one we never had to think about before because it doesn't make sense in that context.
With container queries, it's a limitation that makes sense, but takes a minute to wrap your mind around.
-
@octothorpe I'm finding over time that there are ways to creatively get around that limitation, but just requires new patterns... and I'm wondering if people think it makes sense to do this type of thing
-
@kevinpowell I totally get that . At some point you wonder how ‘creative’ you have to be in order to get it to do The Thing. But I think you’re totally correct in CQ requires new patterns/new thinking that we haven’t needed to do/didn’t make sense to do prior. And that’s always hard.
-
@octothorpe yeah, exactly... I want to make sure I'm not crossing the line.
Is it easier just to wrap an extra element to define the container? Maybe, lol.
-
@kevinpowell I mean, the reality is that’s how it gets done IRL, even if it’s not the correct way.
But part of it is folks such as yourself showing other folk that there really is a better way, rather than to throw yet another div around it.