css - 为什么 CSS 中没有宽度和高度的简写属性？

Question

在 CSS 中编码时，为元素的宽度和高度使用较短的属性会不会更快？
截至目前，我必须输入:

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

虽然速度很快，但我认为这会更快:

selector {dimension: 100px 250px;}

是否已经有可以实现此目的的 CSS 预处理器？似乎在处理大量宽度和高度时会节省一些时间。

---

一个很好的例子就是 CSS Grid属性:

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

相当于:

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

Answer 1

简短回答:CSSWG 尚未就速记属性的名称达成一致。

---

这个想法并不新鲜，很多人多年来不时地提出过这个想法。但是，目前有一个提案 [css-sizing] Adding a 'size' shorthand for 'width'/'height'来自 CSSWG (CSS 工作组)。

很多事情已经讨论过了，但还有一些没有解决。以下是一些示例:

什么是专有名称？

建议的一些名称:

• size:与@page的size属性
冲突
• 尺寸:可能太长或难以拼写
• box-size:可能太接近box-sizing

它将如何运作？

应该是:

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

...或更接近于其他属性，如 padding 或 margin:

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

另外:它是否应该支持一个额外的参数来保持纵横比？

谁会支持它？

• 哪些供应商将支持提案和语法本身？
• 它会增强作者的体验，以便人们实际使用它吗？

---

如您所见，正如 CSSWG 最近在其 Minutes Telecon on 2017-08-16 中所说， future 可能会出现速记符号。 :

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.

---

话虽如此，您当然可以使用 CSS 预处理器，让您的生活更轻松。例如，我在 LESS 中有一个 mixin，看起来像这样:

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

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

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

就这么简单:

.size(100%, 50%);

width: 100%;
height: 50%;

…它也支持方形元素:

.size(100%);

width: 100%;
height: 100%;