What if we add the size CSS-property as a shorthand for width and height?
PostCSS has already implemented the size property via the postcss-size plugin (annoucement in the official PostCSS twitter).
For example:
.foo {size: 10px; }
would set both width and height properties to 10px, so being an exact equivalent to:
.foo {
width: 10px;
height: 10px;
}
And:
.bar {size: 2em 3em; }
would set width and height to 2em and 3em respectively (or height and width if “first vertical then horizontal” order has been chosen in line with margin / padding instead of e.g. background-position).
The reasoning is the same as for other shorthands like margin or padding:
- preventing from repeating yourself if longhands have the same value (that’s what I’m mostly interested in);
- specifying multiple values more compact way (a common feature of shorthands).
This can be (and is) implemented via a preprocessor like SCSS:
@mixin size($value) {
width: $value;
height: $value;
}
But preprocessors exist just to overcome current CSS shortcomings, while it makes sense to overcome them on CSS-itself level to make CSS itself more usable and self-contained in the long term.
(This has originally been proposed in www-style a year ago, but has been ignored by decision makers.)
