为什么 CSS 中的宽度和高度没有 shorthand 属性？

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

是个好主意，但目前官方规范不允许这样做。

就是这样。

Answer 2

简短回答：CSS工作组尚未就 shorthand 属性的名称达成一致。

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

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

什么是专有名词？

建议的一些名称：

size：与 @page 的 size-属性
dimensions: 可能太长或难以拼写
box-size：可能太接近 box-sizing

如何运作？

应该是：

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

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

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

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

谁来支持？

哪些供应商将支持该提案和语法本身？
它会提升作者的体验，让人们真正使用它吗？

如您所见，正如 CSSWG 最近在其 Minutes Telecon on 2017-08-16:

中所说，未来可能会有 shorthand 表示法

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%;

Answer 3

我的建议（只是 opinion/PoV）是：将 size 替换为所选元素的 height 和 width 的 shorthand。

示例：

size: <height> <width>;
size: 420px 297px;
size: 100% 50%;
size: 15rem 5em;

现在关于size的前属性与@page一起使用应该改为page-size。

示例：

来源：MDN Web Docs

/* Keyword values for scalable size */
page-size: auto;
page-size: portrait;
page-size: landscape;

/* <length> values */
/* 1 value: height = width */
page-size: 6in;

/* 2 values: width then height */
page-size: 4in 6in;

/* Keyword values for absolute size */
page-size: A4;
page-size: B5;
page-size: JIS-B4;
page-size: letter;

/* Mixing size and orientation */
page-size: A4 portrait;

为什么 CSS 中的宽度和高度没有 shorthand 属性？

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

css

height

width

shorthand