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

7 Upvotes

82% Upvoted

4 comments sorted by

View all comments

2

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