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

Question

根据规格the value for grid-area is grid-line，其中grid-area。然后，grid-line指出不能将标识放在引号之间，这将使其成为字符串值，这本身就是合理的。

但是全部加起来，必须通过不带引号的ID来访问further uses custom-ident。请参见下面的示例中的比较：

custom-ident

MDN

这似乎很违反直觉。当使用named grid areas之类的名称创建网格区域名称时，名称用引号引起来，就像值一样。但是它们以某种方式成为标识符，例如变量名。为什么选择这种设计？

Answer 1

简短回答

CSS Grid规范开发人员在通过

.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";
}

属性定义命名的网格区域时决定使用标识符而不是字符串，为了与CSS的其余部分保持一致。

绝大多数CSS属性值使用标识符，而不是字符串。 （此规则的显着例外包括

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

，grid: "area1 area2" / 1fr 1fr;和grid-area。）

根据规范作者之间的2013年讨论：

8。命名行语法

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

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

我们认为这是对先前语法的重大改进，并且希望工作组的其他成员对此表示同意。 ：）

来源：font-family

还有这个：

查看当前的语法，以在其中声明命名的网格线网格定义行/列，我们得出的结论是当前语法为可怕：

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

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

来源：content

---

扩展答案

在CSS网格中，可以使用grid-template-areas属性定义https://lists.w3.org/Archives/Public/www-style/2013Aug/0353.html，然后在https://lists.w3.org/Archives/Public/www-style/2013Mar/0256.html属性中引用。

这里是一个例子：

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

中引用的命名网格区域是strings，但是在grid中定义的网格区域是identifiers（

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标识符不会被误认为该媒体资源中的预定义关键字值定义。此类标识符完全区分大小写（意思是甚至可以在ASCII范围内按代码点对它们进行比较（例如，示例和EXAMPLE是两个不同的，不相关的用户定义标识符）。

什么是CSS标识符？

[在CSS Values and Units Module中定义，是“ ...一系列符合§ 4.2. Author-defined Identifiers: the <custom-ident> type语法的字符。不能用引号引起来；否则它们将被解释为字符串。CSS属性接受两类标识符：预定义的关键字和作者定义的标识符。“

---

<custom-ident>

字符串由<custom-ident>表示，并由一系列用双引号或单引号分隔的字符。他们对应于CSS语法中的section 4 of the same spec产生模块。

所以为什么选择标识符而不是字符串作为<ident-token>属性中的值？

如答案的第一部分所述，没有陈述使用一种技术的理由。决定归结为统一性：标识符代表CSS中的绝大多数值，因此§ 4.3. Quoted Strings: the <string> type值将做同样的事情以保持一致性。