Sizing Convenience Methods

[ianstormtaylor]

Opening this again—sorry for the confusion/emails—because I had requested it from master instead of its feature branch and it was causing me headaches elsewhere.

[notslang]

very interesting, thanks for making this! the only concerns I have are:

• "vertical" and "horizontal" are pretty long words, maybe "v" and "h" should be added as aliases?
• a few of these commits should be squashed together

and, of course:

• it needs tests!

[tj]

personally I find this one a bit unnecessary, just because everyone is really used to padding: Y X etc. Maybe padding-y: 5px etc if anything? not sure

[notslang]

I've actually never bothered to memorize the padding shorthands with 3 or 4 args... even the one with 2 args used to trip me up when I first started CSS. So I would make use of this... it's a bit more clear than padding X X X X

[tj]

i find most css stuff a bit counter-intuitive since people usually talk about dimensions x/y width/height, but css stuff is always clockwise from the top padding: top right bottom left, padding: y x, not too bad if you remember that

[vendethiel]

I think we don't really need it with padding-left etc

[kizu]

padding-x and padding-y would fit so much better along with already existent things like overflow-x etc.

Why this would be helpful: while you can use a shorthands like padding: 0 X, this would override any vertical paddings that were before.

So,

.foo
  padding-top: 10px;

.bar
  padding-x: 20px;

aplied to <div class="foo bar"></div> would be different from the padding: 0 20px on .bar here.

So, I'm for renaming the props to -x and -y and then merging it: long names are making the shortcuts not that shorts, while I found times when I wanted such thing in my code.