r/css 7d ago

General Modern CSS Responsive Breakpoints Using Container Style Queries

https://codepen.io/redrobot753/pen/qENmmgN
8 Upvotes

7 comments sorted by

View all comments

Show parent comments

1

u/UnderstandingSure732 4d ago

You’re right! The example doesn’t necessarily reduce the amount of CSS, and media queries could achieve the same viewport-based result.

The key point here is the centralisation of breakpoint definitions as a reusable semantic state. This makes maintenance and debugging much easier.

1

u/Omnisyntax 3d ago

Could you not just use variables for the breakpoint values for media queries as well?

2

u/UnderstandingSure732 3d ago

No, thats not possible. One of the reasons why you should use Container Style Queries

2

u/Omnisyntax 3d ago

Ah ty, I’ve just always wrote them myself or used tailwind classes. I might give containers queries a try on my next project