4 ms·

This CSS shorthand would be so good

• lhorie 7y ago
  Sure, until you need to add a new breakpoint
  • alekswitko 7y ago
    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 7y ago
      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 */
• duxup 7y ago
  So your breakpoints have to be ... those exact pixels to use that shorthand?