Why are CSS named grid areas not in quotes?

Question

According to the spec, the value for grid-area is grid-line, which further uses custom-ident. Then MDN states that identifies cannot be put between quotes, which will make it a string value, which by itself is reasonable.

But adding these all up, named grid areas must be accessed via an ID without quotes. See the comparison in the example below:

.grid {
    display:grid;
    grid: "a b" 1fr "c d" 1fr / 1fr 1fr;
}

.foo {
/* this works just fine, putting it to area b in upper right corner */
    grid-area: b;
}

.bar {
/* quoting the area name fails to resolve correctly */
    grid-area: "c";
}

<div class="grid">
    <span class="foo">foo</span>
    <span class="bar">bar</span>
    <span class="hello">hello</span>
</div>

This seems very counter-intuitive. When one creates grid area names using something like grid: "area1 area2" / 1fr 1fr;, the names are in quotes, feeling like values. But somehow they become identifiers, like variable names. Why this design choice?

Answer 1

为了与 CSS 的其余部分保持一致， CSS 网格规范开发人员决定在使用属性定义命名网格区域时使用标识符而不是字符串。grid-area

绝大多数 CSS 属性使用标识符而不是字符串作为它们的值。（此规则的显着例外包括font-family,content和grid-template-areas，两者都使用。）

来自 2013 年规范作者之间的讨论：

8. 命名行语法

以前的命名行语法非常笨拙……它还使用字符串作为 CSS 内部标识符，我们在其他任何地方都没有这样做。Tab 和我从该线程中接受了建议，即切换到标识符并使​​用括号将同一位置的多个名称分组。这有以下好处

• 使用标识符，与 CSS 的其余部分一致
• 提供标识相同位置的名称的视觉分组
• 允许命名网格区域模板语法（使用字符串）与网格模板速记中的命名行共存。

我们认为这是对之前语法的显着改进，并希望工作组的其他成员同意。:)

来源：https : //lists.w3.org/Archives/Public/www-style/2013Aug/0353.html

还有这个线程：

查看当前在 grid-definition-rows/columns 中声明命名网格线的语法，我们得出的结论是当前的语法很糟糕：

• 我们使用字符串来表示用户标识，这与 CSS 中的其他所有内容都不一致。

我们目前解决此问题的建议是将行名称切换为 idents...

来源：https : //lists.w3.org/Archives/Public/www-style/2013Mar/0256.html

更多细节

在 CSS Grid 中，可以使用属性定义命名网格区域grid-area，然后在grid-template-areas属性中引用。

下面是一个例子：

.grid {
    display: grid;
    grid-template-areas: "   logo    nav     nav   "
                         " content content content "
                         " footer  footer   footer " ;
}

.logo  { grid-area: logo;    }
nav    { grid-area: nav;     }
main   { grid-area: content; }
footer { grid-area: footer;  }

另一个示例，grid在容器上使用速记属性，来自以下问题：

.grid {
    display: grid;
    grid: "a b" 1fr "c d" 1fr / 1fr 1fr;
}

.foo {
    grid-area: b;
}

在这种情况下，该grid属性分解为：

grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "a b"
                     "c d";

所以很明显，命名网格区域在 中引用时grid-template-areas是字符串，但是当它们在 中定义时grid-area，它们是标识符( <custom-ident>)。

有什么不同？

根据CSS 值和单位模块规范：

§ 4.2。作者定义的标识符：<custom-ident> 类型

某些属性接受任意作者定义的标识符作为组件值。这种通用数据类型由<custom-ident>,表示 ，代表任何有效的 CSS 标识符，这些标识符不会被误解为该属性值定义中的预定义关键字。这样的标识符完全区分大小写（意味着它们通过代码点进行比较），即使在 ASCII 范围内（例如，example 和EXAMPLE 是两个不同的、不相关的用户定义的标识符）。

什么是 CSS 标识符？

如同一规范的第 4 节所定义，它们是“...符合<ident-token>语法的字符序列。标识符不能被引用；否则它们将被解释为字符串。CSS 属性接受两类标识符：预定义的关键字和作者定义的标识符。”

§ 4.3。带引号的字符串：<string> 类型

字符串<string>由由双引号或单引号分隔的字符序列表示并由其组成。它们对应<string-token>于 CSS 语法模块中的产生式。

那么为什么选择一个标识符而不是一个字符串作为grid-area属性中的值呢？

如答案的第一部分所述，没有明确的技术原因使用一个而不是另一个。决定归结为一致性：标识符代表了 CSS 中的绝大多数值，因此grid-area值会做同样的事情来保持一致性。