
This CSS shorthand would be so good - alekswitko
https://imgur.com/a/6gFCQu8
======
duxup
So your breakpoints have to be ... those exact pixels to use that shorthand?

------
lhorie
Sure, until you need to add a new breakpoint

~~~
alekswitko
You could still use the normal way for edge cases, if that's what you mean.
I'm not sure adding a new breakpoint would be much less work the old way?

~~~
lhorie
No, I mean if your entire codebase is written this way, adding a breakpoint
somewhere in the middle of the pack now requires editing every rule that uses
this shorthand otherwise the values after the corresponding breakpoint will
apply to the wrong breakpoints.

    
    
        /* before */
        width: 10px | 20px | 30px | 40px | 50px
    
        /* after */
        @media (min-width: 360px) { /* here I added a new smallest breakpoint somewhere */ }
        /* ...elsewhere in the stylesheet */
        width: 5px | 10px | 20px | 30px | 40px | 50px
        /*     ^ every rule using the shorthand now needs a new value at this slot */
        /* if you forget to align the slots, you will break every existing layout */
        /* code written the normal way does not suffer from this regression */

