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.
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.)
From a 2013 discussion between spec writers:
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
There’s also this thread:
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
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.
Here’s an example:
.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; }
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;
}
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";
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>).
What’s the difference?
According to the CSS Values and Units Module specification:
§ 4.2. Author-defined Identifiers: the
<custom-ident>
typeSome 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).
What are CSS identifiers?
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.”
§ 4.3. Quoted Strings: the
<string>
typeStrings 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.
So why pick an identifier instead of a string as the value in the grid-area property?
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.