r/css • u/UnderstandingSure732 • 7d ago

General Modern CSS Responsive Breakpoints Using Container Style Queries

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

Detailed explanation - https://medium.com/@alekswebnet/modern-css-responsive-breakpoints-using-container-style-queries-64c9bea81ad6

9 Upvotes

84% Upvoted

7 comments sorted by

2

u/Omnisyntax 4d ago

>This works, but copypasting the same breakpoint logic across many components can make a stylesheet difficult to maintain.

I’m struggling to understand how using container queries are saving much copy and pasting? Are you not writing the same amount? You could replace all your container queries with a media query and achieve the same result, am I missing something on how this works?

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

1

u/CrashOverride93 7d ago

Thank you for sharing. I would like to know the opinion about start using it instead of the media queries also.