为什么CSS命名的网格区域不在引号中? [英] Why are CSS named grid areas not in quotes?
问题描述
根据规范， grid-area的值是
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.
但是将所有内容加在一起，命名网格区域必须通过不带引号的ID进行访问.请参见下面的示例中的比较:
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>
这似乎很违反直觉.当使用grid: "area1 area2" / 1fr 1fr;之类的名称创建网格区域名称时，名称用引号引起来，就像值一样.但是它们以某种方式成为标识符，例如变量名.为什么选择这种设计?
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?
推荐答案
CSS网格规范开发人员在使用以下方法定义命名网格区域时决定使用标识符而不是字符串. grid-area属性，为了与CSS的其余部分保持一致.
The CSS Grid spec developers decided to use identifiers instead of strings, when defining named grid areas with the grid-area property, for the sake of consistency with the rest of CSS.
绝大多数CSS属性使用标识符而不是字符串作为其值. (此规则的显着例外包括font-family，content和grid-template-areas，它们同时使用.)
The vast majority of CSS properties use identifiers, not strings, for their values. (Notable exceptions to this rule include font-family, content and grid-template-areas, which use both.)
根据规范作者之间的2013年讨论:
From a 2013 discussion between spec writers:
8.命名行语法
以前的命名行语法非常尴尬... 它还使用字符串作为CSS内部标识符，我们不这样做 其他任何地方. Tab和我从那个线程那里获得了建议，这是 切换到标识符并使用括号将多个名称分组 对于相同的位置.这样做的好处是
The previous named lines syntax was pretty awkward... It also used strings as CSS-internal identifiers, which we don't do anywhere else. Tab and I took the proposal from that thread, which was to switch to identifiers and use parentheses to group multiple names for the same position. This has the benefit of
- 使用标识符，与CSS的其余部分一致
- 提供视觉名称的分组，以标识相同的位置
- 允许命名网格区域模板语法(使用字符串)与网格模板速记中的命名行共存.
- Using identifiers, consistent with the rest of CSS
- Providing visual grouping of names that identify the same location
- Allowing the named grid areas template syntax (which uses strings) to co-exist with named lines in the grid-template shorthand.
我们认为这是对先前语法的巨大改进，并且 希望工作组的其他成员对此表示同意. :)
We think this is a dramatic improvement over the previous syntax, and hope that the rest of the WG agrees. :)
来源: https://lists. w3.org/Archives/Public/www-style/2013Aug/0353.html
还有这个线程:
查看当前的语法，以在其中声明命名的网格线 网格定义行/列，我们得出的结论是 当前语法是糟糕:
Looking over the current syntax for declaring named grid lines in grid-definition-rows/columns, we've come to the conclusion that the current syntax is terrible:
- 我们正在使用字符串来表示用户身份，这与CSS中的其他所有内容都不一致.
我们当前解决此问题的建议是将行名切换为 身份...
Our current suggestion for fixing this is to switch the line names to idents...
来源: https://lists. w3.org/Archives/Public/www-style/2013Mar/0256.html
更多详细信息
在CSS网格中，命名网格区域可以使用grid-area属性定义，然后在grid-template-areas属性中引用.
More details
In CSS Grid, named grid areas can be defined using the grid-area property, and then referenced in the grid-template-areas property.
这是一个例子:
.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属性，来自以下问题:
Another example, using the shorthand grid property on the container, comes from the question:
.grid {
display: grid;
grid: "a b" 1fr "c d" 1fr / 1fr 1fr;
}
.foo {
grid-area: b;
}
在这种情况下，grid属性细分为:
In this case, the grid property breaks down to this:
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "a b"
"c d";
因此，很显然，在grid-template-areas中引用的命名网格区域是字符串，但是在grid-area中定义它们时，它们是标识符( <custom-ident>).
So it's clear that named grid areas, when referenced in grid-template-areas, are strings, but when they're defined in grid-area, they are identifiers (<custom-ident>).
有什么区别?
根据 CSS值和单位模块规范:
某些属性接受任意作者定义的标识符作为
组件值.此通用数据类型由表示
<custom-ident>，代表任何有效的CSS标识符，
不会被误认为该媒体资源的预定义关键字
值定义.这样的标识符是完全区分大小写的(意思是
甚至可以在ASCII范围内按代码点对它们进行比较(例如，示例
和EXAMPLE是两个不同的，不相关的用户定义标识符.
Some properties accept arbitrary author-defined identifiers as a
component value. This generic data type is denoted by
<custom-ident>, and represents any valid CSS identifier that would
not be misinterpreted as a pre-defined keyword in that property’s
value definition. Such identifiers are fully case-sensitive (meaning
they’re compared by codepoint), even in the ASCII range (e.g. example
and EXAMPLE are two different, unrelated user-defined identifiers).
什么是CSS标识符?
根据同一规范的第4部分中的定义，它们是"...一系列符合<ident-token>语法的字符.不能用引号引起来；否则它们将被解释为字符串.CSS属性接受两类标识符:预定义关键字和作者定义标识符."
As defined in section 4 of the same spec, they are "...a sequence of characters conforming to the <ident-token> grammar. Identifiers cannot be quoted; otherwise they would be interpreted as strings. CSS properties accept two classes of identifiers: pre-defined keywords and author-defined identifiers."
字符串由<string>表示，并由一系列
用双引号或单引号分隔的字符.他们
对应于CSS语法中的<string-token>生产
模块.
Strings are denoted by <string> and consist of a sequence of
characters delimited by double quotes or single quotes. They
correspond to the <string-token> production in the CSS Syntax
Module.
那么为什么选择标识符而不是字符串作为grid-area属性中的值?
So why pick an identifier instead of a string as the value in the grid-area property?
如答案的第一部分所述，没有明确的技术理由使用一个选项.决定归结为统一性:标识符代表CSS中的绝大多数值，因此grid-area值将做同样的事情以保持一致性.
As noted in the first part of the answer, there is no stated technical reason for using one over the other. The decision came down to uniformity: identifiers represent the vast majority of values in CSS, so grid-area values would do the same to maintain consistency.
这篇关于为什么CSS命名的网格区域不在引号中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
