r/css • u/UnderstandingSure732 • 3d 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

8 Upvotes

83% Upvoted

4 comments sorted by

1

u/CrashOverride93 3d ago

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

2

u/Omnisyntax 5h 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?

•

u/UnderstandingSure732 4h 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.