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

Question

根据规范，the value for grid-area is grid-line, which further uses custom-ident. Then MDN声明标识不能放在引号之间，这将使它成为一个字符串值，这本身是合理的。

但是将这些加起来，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-area 属性, 为了与其余部分保持一致 CSS.

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

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

8. Named Lines Syntax

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

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

source: 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:

We're using strings to represent a user-ident, which is inconsistent with everything else in CSS.

Our current suggestion for fixing this is to switch the line names to idents...

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

更多详情

在CSS网格中，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;  }

另一个例子，在容器上使用shorthand 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

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 标识符？

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

§ 4.3. Quoted Strings: the <string> type

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 属性中的值？

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

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

Why are CSS named grid areas not in quotes?

css

language-lawyer

css-grid

specifications

w3c

更多详情