Why Aren't CSS Named Grid Areas Enclosed in Quotes?

Why Are CSS Named Grid Areas Not in Quotes?

In CSS Grid, named grid areas are defined using the grid-area property without quotes. This might seem counterintuitive since the names are enclosed in quotes when creating grid area names with grid: "area1 area2" / 1fr 1fr;. However, this design choice was made for consistency with the rest of the CSS specification.

Consistency with Other CSS Properties

Almost all CSS properties use identifiers for their values, rather than strings. Exceptions include strings-based properties such as font-family, content, and grid-template-areas. By maintaining identifiers for named grid area values, CSS remains consistent with its overall syntax.

Maintaining Differentiation Between Syntaxes

The decision to represent named grid areas both as strings in grid-template-areas and identifiers in grid-area serves two purposes:

1. Visual Grouping: Identifiers within parentheses visually group names for the same position.
2. Allowing Co-existence of Both Syntaxes: This differentiation enables the grid-template-areas syntax and named lines to co-exist within the grid shorthand property.

Rationale from the CSS Grid Spec Developers

Excerpts from discussions held during the development of the CSS Grid specification explain the reasoning behind using identifiers:

Syntax for Named Lines:

"The previous named lines syntax was awkward and used strings as CSS-internal identifiers, which we don't use anywhere else. By switching to identifiers, we ensure consistency with the rest of CSS and allow for visual grouping of names."

Using Identifiers Over Strings:

"Our suggestion is to switch line names to identifiers. Doing so will fix the current terrible syntax issue and provide consistency with the rest of CSS syntax."

Conclusion

While it may seem counterintuitive at first, using identifiers for named grid areas enhances the overall consistency of CSS. It aligns with the majority of property values, allows for better visual grouping, and enables compatibility between different grid syntaxes.

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