Why Don't CSS Named Grid Areas Require Quotes in `grid-area`?

Why CSS Named Grid Areas Aren't Encased in Quotes

According to the CSS Grid specification, grid-area values are classified as grid-line, which in turn utilizes custom-ident. The MDN documentation emphasizes that IDs cannot be included within quotes, as this would transform them into strings. However, when combining these concepts, it becomes apparent that named grid areas should be accessed through an ID without quotes.

The example below illustrates this distinction:

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

.foo {
    grid-area: b;
}

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

While assigning the value "b" to grid-area works as expected, enclosing the area name in quotes (e.g., "c") results in incorrect recognition. This behavior may appear unintuitive, as grid area names are typically surrounded by quotes when defined (e.g., grid: "area1 area2" / 1fr 1fr;). However, in this context, they are treated as identifiers, akin to variable names.

Design Rationale

The developers behind the CSS Grid specification opted for identifiers over strings for named grid areas, primarily due to consistency with the broader CSS framework. The vast majority of CSS properties employ identifiers, not strings, for their values. Notable exceptions include font-family, content, and grid-template-areas, which allow for both.

In a 2013 discussion, spec writers emphasized the following benefits of using identifiers:

• Alignment with the prevailing CSS convention
• Clear visual grouping of names that identify the same location
• Compatibility between the named grid areas template syntax (which uses strings) and named lines in the grid-template shorthand

Implementation Details

CSS Grid defines named grid areas using the grid-area property, which can be referenced within grid-template-areas. Consider the following 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:

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

.foo {
    grid-area: b;
}

In this second example, the shorthand notation translates to:

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

In grid-template-areas, named grid areas are encapsulated in strings. In contrast, grid-area assigns them as identifiers ().

Identifiers and Strings in CSS

The CSS Values and Units Module specification defines identifiers as:

"...a sequence of characters conforming to the 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."

On the other hand, strings are represented by and consist of characters enclosed in double or single quotes.

Rationale for Identifier Usage in grid-area

According to the spec writers, the decision to employ identifiers instead of strings in grid-area values was based on the desire for consistency. Identifiers are the predominant value type in CSS, and grid-area would simply follow suit.

The above is the detailed content of Why Don't CSS Named Grid Areas Require Quotes in `grid-area`?. For more information, please follow other related articles on the PHP Chinese website!