为什么 CSS 命名的网格区域不需要在 `grid-area` 中加引号？

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

根据 CSS 网格规范，网格区域值被分类为网格线，而网格线又是使用自定义标识。 MDN 文档强调 ID 不能包含在引号内，因为这会将它们转换为字符串。然而，当组合这些概念时，很明显，命名网格区域应该通过不带引号的 ID 来访问。

下面的示例说明了这种区别：

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

.foo {
    grid-area: b;
}

.bar {
    grid-area: "c";
}

在分配值时 " b" 到网格区域按预期工作，将区域名称括在引号中（例如“c”）会导致错误识别。这种行为可能看起来不直观，因为网格区域名称在定义时通常用引号括起来（例如 grid: "area1 area2" / 1fr 1fr;）。然而，在这种情况下，它们被视为标识符，类似于变量名称。

设计原理

CSS 网格规范背后的开发人员选择在命名网格区域中使用标识符而不是字符串，主要是因为与更广泛的 CSS 框架保持一致。绝大多数 CSS 属性都使用标识符而不是字符串作为其值。值得注意的例外包括字体系列、内容和网格模板区域，它们允许两者。

在 2013 年的讨论中，规范编写者强调了使用标识符的以下好处：

• 与流行的 CSS 约定保持一致
• 标识相同名称的清晰视觉分组location
• 命名网格区域模板语法（使用字符串）与 grid-template 速记中的命名行之间的兼容性

实现细节

CSS 网格定义命名使用 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 {
    display: grid;
    grid: "a b" 1fr "c d" 1fr / 1fr 1fr;
}

.foo {
    grid-area: b;
}

在第二个示例中，速记符号转换为：

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

在 grid-template-areas 中，命名的网格区域封装在字符串中。相反，grid-area 将它们分配为标识符 ()。

CSS 中的标识符和字符串

CSS 值和单位模块规范将标识符定义为：

"...符合 语法的字符序列。标识符不能用引号引起来；否则它们会CSS 属性接受两类标识符：预定义的关键字和作者定义的标识符。”

另一方面，字符串由 表示。并且由用双引号或单引号括起来的字符组成。

网格区域中标识符使用的基本原理

根据规范编写者的说法，在网格区域值中使用标识符而不是字符串的决定是基于对一致性的渴望。标识符是 CSS 中的主要值类型，网格区域也将效仿。

以上是为什么 CSS 命名的网格区域不需要在 `grid-area` 中加引号？的详细内容。更多信息请关注PHP中文网其他相关文章！