"1) Top-Level Media Query Aside from the slightly-newish media query syntax there, this has deep browser support and is a classic way of achieving our goal. Advantages? The single top-level media query could contain other selectors so you can do more work under the logic of a single media query."
"2) Nested Media Query Advantages? The nesting puts the property you are changing nearby the original, helping understanding at a glance what changes. You don't have to repeat the .grid selector. Disadvantages? The 500px breakpoint might be a common one where you make other changes to the design. Nesting might have you sprinkling/repeating them throughout the code rather than consolidating the changes together."
"4) Using a Custom Function Newfangled CSS! Custom value functions return a single value, and thus can be used to abstract away logic. Advantages? Abstracted away logic can make the more declarative design block easier to read. Like a custom property, the function can be re-used. Disadvantages? Very low browser support so far. Abstraction doesn't always mean more understandable code. Unfortunate you can't pass an argument for the media qu"
Top-level media queries provide broad browser support and allow grouping multiple selectors under a single breakpoint, but they require repeating selectors and properties and place the change away from the original declaration. Nested media queries keep the changed property close to the original and avoid repeating the .grid selector, but they can scatter breakpoint logic across the codebase when the same breakpoint affects many rules. Using a custom property stores the grid-template-columns value for reuse and prevents repeating the property, but naming and extra abstraction can confuse. Custom value functions can encapsulate logic and be reused but suffer from very limited browser support and potential over-abstraction.
Read at Frontendmasters
Unable to calculate read time
Collection
[
|
...
]