Why are CSS named grid areas not in quotes?

Question

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.

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>

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?

Answer 1

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

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

---

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.