Why Are CSS Named Grid Areas Not in Quotes

Why are CSS named grid areas not in quotes?

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.

why wont grid-template-area work? everything should be set correctly

Your definition of the grid template areas is OK, but when you come to set the grid-area for an item you have used quotes which are not required.

.spaces {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: "zero ... six seven eight" "one ... five ... nine" "two three four ... ten";
}

.zero {
  grid-area: zero;
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.four {
  grid-area: four;
}

.five {
  grid-area: five;
}

.six {
  grid-area: six;
}

.seven {
  grid-area: seven;
}

.eight {
  grid-area: eight;
}

.nine {
  grid-area: nine;
}

.ten {
  grid-area: ten;
}

<div class="spaces">
  <div class="zero">0</div>
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
  <div class="six">6</div>
  <div class="seven">7</div>
  <div class="eight">8</div>
  <div class="nine">9</div>
  <div class="ten">10</div>
</div>

// postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import')(),
    require('postcss-url')(),
    require('cssnano')({
      preset: [
        'advanced',
        {
          discardComments: {
            removeAllButFirst: true,
          },
          reduceIdents: {
            gridTemplate: false,
          },
          autoprefixer: {},
        },
      ],
    }),
  ],
};

.grid-mobile {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px 300px 300px;
  grid-gap: 20px;
  grid-template-areas:
    '. top .'
    'left middle right'
    '. bottom .';
}

.mobile-top {
  grid-area: top;
  background-color: blue;
}

.mobile-left {
  grid-area: left;
  background-color: purple;
}

.mobile-right {
  grid-area: right;
  background-color: orange;
}

.mobile-middle {
  grid-area: middle;
  background-color: pink;
}

.mobile-bottom {
  grid-area: bottom;
  background-color: red;
}

<section class="grid-mobile">
  <div class="mobile-top">e</div>
  <div class="mobile-left">weqr</div>
  <div class="mobile-middle">e</div>
  <div class="mobile-right">e</div>
  <div class="mobile-bottom">wqer</div>
</section>

.button1 {
  grid-area: 'a1';
}

.button1 {
  grid-area: a1;
}

.wrapper {  display: grid;  grid-template-columns: 5fr 1fr;  grid-auto-rows: 20px;  grid-template-areas:  "a1 a2"  "a3 a3"  "b1 b2"  "b3 b3"  ;}
.button1 {  grid-area: a1;}
.button2 {  grid-area: a2;}
.div1 {  grid-area: a3;}
.button3 {  grid-area: b1;}
.button4 {  grid-area: b2;}
.div2 {  grid-area: b3;}

<div class='wrapper'>  <button class='button1'>Btn1</button>  <button class='button2'>Btn2</button>
  <!-- Let's choose not to render it -->  <!--  <div class='div1'>Content</div>  -->
  <button class='button3'>Btn3</button>  <button class='button4'>Btn4</button>
  <div class='div2'>Content</div>
</div>

.calculator{
    width: 50%;
    min-height: 75%;
    display: grid;
    grid-template-areas: 
    "screen screen screen screen"
    "delete percent negative division"
    "seven eight nine multiply"
    "four five six subtract"
    "one two three add"
    "dot zero squareRoot equals";

    text-align: center;
    outline: 1.5px solid black;

    & > *{
        outline: 1.5px solid black;
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 2.4rem;
    }


    &-screen{
        grid-area: screen;
        justify-content: end;
        align-items: flex-end;

        padding: 0px 20px 20px 0px;
        font-size: 3rem;
    }

    &-delete{
        grid-area: delete;
    }

    &-percent{
        grid-area: percent;
    }
    &-negative{
        grid-area: negative;
    }
    &-division{
        grid-area: division;
    }
    &-7{
        grid-area: seven;
    }

    &-8{
        grid-area: eight;
    }
    &-9{
        grid-area: nine;
    }
    &-multiply{
        grid-area: multiply;
    }
    &-4{
        grid-area: four;
    }

    &-5{
        grid-area: five;
    }
    &-6{
        grid-area: six;
    }
    &-subtract{
        grid-area: subtract;
    }

    &-1{
        grid-area: one;
    }
    &-2{
        grid-area: two;
    }
    &-3{
        grid-area: three;
    }

    &-add{
        grid-area: add;
    }
    &-dot{
        grid-area: dot;
    }
    &-zero{
        grid-area: zero;
    }

    &-squareRoot{
        grid-area: squareRoot;
    }
    &-equals{
        grid-area: equals;
    }