为什么 CSS 命名的网格区域不在引号中？

Question

根据规范，the value for grid-area is grid-line，其中further uses custom-ident。然后MDN表示identifier不能放在引号之间，这样会变成字符串值，这本身就是合理的。

但是将这些全部加起来，named grid areas 必须通过不带引号的 ID 访问。请参阅以下示例中的比较：

.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>

这似乎很违反直觉。当使用grid: "area1 area2" / 1fr 1fr; 之类的东西创建网格区域名称时，名称是用引号引起来的，感觉像是值。但不知何故，它们变成了标识符，就像变量名一样。为什么选择这种设计？

Answer 1

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

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

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

8.命名行语法

之前的命名行语法很尴尬... 它还使用字符串作为 CSS 内部标识符，我们不这样做 其他任何地方。 Tab 和我从那个线程中得到了建议，它是 切换到标识符并使​​用括号将多个名称分组 对于相同的位置。这样做的好处是

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

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

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

还有这个话题：

查看当前用于声明命名网格线的语法 网格定义行/列，我们得出的结论是 当前语法糟糕：

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

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

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

---

更多详情

在 CSS Grid 中，named grid areas 可以使用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 Values and Units Module 规范：

§ 4.2. Author-defined Identifiers: the <custom-ident> type

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

什么是 CSS 标识符？

正如section 4 of the same spec 中定义的那样，它们是"...符合<ident-token> 语法的字符序列。标识符不能被引用；否则它们将被解释为字符串。CSS 属性接受两类标识符：预定义的关键字和作者定义的标识符。”

---

§ 4.3. Quoted Strings: the <string> type

字符串由<string> 表示，由一系列 由双引号或单引号分隔的字符。他们 对应于 CSS 语法中的 <string-token> 产生式 模块。

---

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

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