Почему CSS именованные области сетки не в кавычках?

Question

Согласно спецификации c, значение для grid-area равно grid-line, которое дополнительно использует custom-ident. Затем MDN заявляет, что идентификаторы нельзя помещать между кавычками, что делает его строковым значением, что само по себе разумно.

Но, сложив все это, назвал области сетки должен быть доступен через идентификатор без кавычек. Смотрите сравнение в примере ниже:

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

Это кажется очень нелогичным. Когда вы создаете имена областей сетки, используя что-то вроде grid: "area1 area2" / 1fr 1fr;, имена заключаются в кавычки, чувствуя себя как значения. Но так или иначе они становятся идентификаторами, как имена переменных. Почему этот выбор дизайна?

Answer 1

Разработчики CSS Grid spe c решили использовать идентификаторы вместо строк при определении именованных областей сетки со свойством grid-area, для ради согласованности с остальными CSS.

Подавляющее большинство CSS свойств используют идентификаторы, а не строки, для своих значений. (Известные исключения из этого правила включают font-family, content и grid-template-areas, которые используют оба.)

Из обсуждения 2013 года между авторами spe c:

8. Синтаксис именованных строк

Синтаксис предыдущих именованных строк был довольно неловким ... Он также использовал строки как CSS -внутренние идентификаторы, чего мы больше нигде не делаем. Таб и я взяли предложение из этого потока, которое должно было переключиться на идентификаторы и использовать круглые скобки, чтобы сгруппировать несколько имен для одной и той же позиции. Это дает преимущество:

• Использование идентификаторов в соответствии с остальными CSS
• Обеспечение визуальной группировки имен, идентифицирующих одно и то же местоположение
• Разрешение именованным Синтаксис шаблона областей сетки (который использует строки) для сосуществования с именованными линиями в сокращении шаблона сетки.

Мы думаем, что это драматическое c улучшение по сравнению с предыдущим синтаксисом, и надеемся, что остальная часть РГ соглашается. :)

источник: https://lists.w3.org/Archives/Public/www-style/2013Aug/0353.html

Также есть эта тема:

Просмотр текущий синтаксис для объявления именованных линий сетки в grid-Definition-строки / столбцы, мы пришли к выводу, что текущий синтаксис ужасный :

• Мы используем строки для представления идентификатора пользователя, что несовместимо со всем остальным в CSS.

Наше текущее предложение для исправления этого заключается в переключении имен строк на идентификаторы ...

источник: https://lists.w3.org/Archives/Public/www-style/2013Mar/0256.html

---

Подробнее

В CSS Сетка, именованные области сетки можно определить с помощью свойства grid-area, а затем ссылаться на него в свойстве grid-template-areas.

Вот пример:

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

Другой пример с использованием сокращения grid свойство контейнера, вытекает из вопроса:

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

.foo {
    grid-area: b;
}

В этом случае свойство grid сводится к следующему:

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

Так что ясно, что Названные области сетки, на которые ссылаются в grid-template-areas, являются строками , но когда они определены в grid-area, они являются идентификаторами (<custom-ident>).

В чем разница?

Согласно CSS Модуль значений и единиц Спецификация:

§ 4.2. Определенные автором идентификаторы: тип <custom-ident>

Некоторые свойства принимают произвольные определяемые автором идентификаторы в качестве значения компонента. Этот обобщенный тип данных c обозначается <custom-ident> и представляет любой действительный идентификатор CSS, который не будет неверно истолкован как предопределенное ключевое слово в определении значения этого свойства. Такие идентификаторы полностью чувствительны к регистру (то есть они сравниваются по кодам), даже в диапазоне ASCII (например, пример и ПРИМЕР - это два разных, не связанных между собой идентификатора, определенных пользователем).

Что такое CSS идентификаторы?

Как определено в разделе 4 того же документа c, они "... последовательность символов, соответствующих грамматике <ident-token>. Идентификаторы нельзя заключать в кавычки, в противном случае они будут интерпретироваться как строки. CSS свойства принимают два класса идентификаторов: предопределенные ключевые слова и идентификаторы, определенные автором. "

---

§ 4.3. Строки в кавычках: тип <string>

Строки обозначаются <string> и состоят из последовательности символов, разделенных двойными или одинарными кавычками. Они соответствуют продукции <string-token> в модуле синтаксиса CSS.

---

Так зачем выбирать идентификатор вместо строки в качестве значения в свойстве grid-area?

Как отмечалось в первой части ответа, нет никаких технических причин для использования одного над другим , Решение сводилось к единообразию: идентификаторы представляют подавляющее большинство значений в CSS, поэтому значения grid-area будут делать то же самое для поддержания согласованности.