Why isn't there a shorthand property for width and height in CSS?

Question

Wouldn't it be faster to use a shorter property for an item's width and height when coding in CSS?
As of now I have to type:

selector {width: 100px; height: 250px;}

Which is fast as it is, but I reckon that this would be faster:

selector {dimension: 100px 250px;}

Is there already a CSS pre-processor that can achieve this? Seems like it would save a bit of time when doing lots of width's and height's.

---

A good example could be the CSS Grid properties:

grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;  

Would be the same as:

grid-template: 100px 100px / 100px 100px;

Answer 1

Short answer: The CSSWG couldn't agree on a name for the shorthand property yet.

---

The idea isn't new and a lot of people suggested it every now and then over the years. However, there's a current proposal [css-sizing] Adding a 'size' shorthand for 'width'/'height' from the CSSWG (CSS Working Group).

A lot of things have been discussed already, but a few are still unresolved. Here are some examples:

What is the proper name?

Some of the names that where suggested:

• size: clashes with the @page's size-property
• dimensions: probably too long or difficult to spell
• box-size: probably too close to box-sizing

How will it work?

Should it be:

<box-size>: <width> <height>?

… or closer related to other properties like padding or margin:

<box-size>: <height> <width>?

Also: Should it support an additional parameter that will keep the aspect ratio?

Who's going to support it?

• Which vendors will support the proposal and the syntax itself?
• Will it enhance the author's experience, so that people will actually use it?

---

As you can see, there might be a shorthand notation in the future, as the CSSWG said recently in their Minutes Telecon on 2017-08-16:

The group agreed that a shorthand for ‘width’/’height’ would be good, but shouldn’t be called ‘size’. However, there wasn’t time to come up with a different name.

---

That being said, of course you can use a CSS pre-processor, to make your life easier. For example, I have a mixin in LESS, that looks like this:

.size(@a: null, @b: null) {
    & when not (null = @a) {
        width: @a;
    }

    & when (null = @b) {
        height: @a;
    }

    & when not (null = @b) {
        height: @b;
    }
}

Which is as simple as this:

.size(100%, 50%);

width: 100%;
height: 50%;

… and it supports square elements as well:

.size(100%);

width: 100%;
height: 100%;