Были ли какие-либо технические ограничения в CSS, которые привели к решению использовать `--` для vars?

С введением css vars я хотел бы знать причину, по которой почему -- будет выбран в качестве способа обозначения var.

Учитывая, что в CSS есть полуфункциональная функция calc, я чувствую, что -- можно легко спутать с оператором декремента в других языках.

Мне любопытно, есть ли какое-либо историческое значение или техническое ограничение, которое привело к выбору --. В частности, меня озадачивает двойное число, когда маркеры CSS обычно являются одиночными (#, ., @ и т. д.). Также интересно использовать символ, который уже используется другими вещами (особенно когда его допустимо для имени класса, начинающегося с --).

Пример:

@custom-media --lt-sm (width < 576px);
--grey300: #e0e0e0;

.navbarItem {
    display: inline-block;
    text-align: center;
    border-top: 1px solid var(--grey300);
    border-left: 1px solid var(--grey300);

    @media (--lt-sm) {
        flex-grow: 1;
    }

    &:last-child {
        border-right: 1px solid var(--grey300);
    }
}

Отказ от ответственности

Кто-то может оспорить обоснованность этого вопроса, но понимание почему является ключевым методом для запоминания конкретной концепции.

Единственное обсуждение, которое я могу найти, связанное с этим:

Сегодня на телконе мы решили использовать префикс «--» для обозначения пользовательских свойств и других пользовательских вещей.

Мы обсудили, сохраняется ли префикс или удаляется при обращении к пользовательскому свойству из функции var(), но на самом деле не решили. Обсуждение во время звонка склонялось к тому, чтобы отказаться от префикса, как я сейчас делаю со свойствами var-*, но некоторые сторонние обсуждения с Саймоном и Сильвеном приводили доводы в пользу использования полного имени, поскольку есть запутанные случаи, такие как «--0» или «-- --".

Итак, хотя я понимаю потенциальную путаницу, вызванную тем, что авторы, возможно, думают, что var() может принимать любое имя свойства в качестве аргумента, я думаю, что это перевешивает путаница с тем, что нужно экранировать в различных обстоятельствах. Правила экранирования всегда очень запутывают авторов, поэтому я собираюсь использовать «использовать имя пользовательского свойства буквально в качестве аргумента var()».

Ссылка:

http://lists.w3.org/Archives/Public/www-style/2014Mar/0467.html

https://www.w3.org/TR/css-variables/#defining-variables


css css-variables w3c
person Chris    schedule 06.03.2017    source источник
comment
Да, но не следует путать CSS и другие языки. Конечно, -- выглядит как оператор декремента, но тогда слова, содержащие один -, выглядят как вычитание по сравнению с другими языками. Итак, CSS довольно уникален! В любом случае, вопрос, зачем использовать два знака минус вместо одного символа; может быть, они боялись, что у них закончились отдельные символы. Большинство других уже использовались.   -  person Mr Lister    schedule 06.03.2017
comment
Уникальный не станет это объяснять! Полностью понимаю, что вы говорите, я думаю, почему бы просто не использовать один -, если они думали о том, чтобы закончиться? Я понимаю, что может быть несколько причин (или ни одной), но мне просто было интересно, обсуждалось ли это/задокументировано рассуждение, которое привело их туда в конце   -  person Chris    schedule 06.03.2017

Ответы (3)


arrow_upward
4
arrow_downward

Помимо предотвращения конфликтов с префиксами поставщиков, которые начинаются с одного тире, как указано в других ответах, имейте в виду, что грамматика для идентификатора CSS не допускает ничего, кроме букв, цифр, тире и символов подчеркивания (см. раздел 4.1.3 CSS2). Если бы настраиваемое свойство обозначалось каким-либо другим символом, каждая существующая реализация CSS должна была бы обновить или даже переписать свой синтаксический анализатор только для того, чтобы приспособить любой символ, используемый для имен настраиваемых свойств.1

Из минут телеконференций, о которых упоминается в сообщение, вы можете видеть, что гипотеза об избежании конфликтов с префиксами поставщиков, начинающимися с одного дефиса, верна. Использование -- потребовало незначительного изменения синтаксического анализатора, поскольку идентификаторы обычно не могут начинаться с двойного тире (как указал Клумм). Я точно не знаю, как существующие реализации анализируют объявления (d), но можно с уверенностью предположить, что мои рассуждения остаются в силе: поскольку идентификаторы могут начинаться с одного дефиса, использование первого дефиса не приведет к немедленному результату ошибка синтаксического анализа, поэтому синтаксический анализатор может определить, просматривает ли он <property> или <custom-property-name> (или затем столкнуться с ошибкой синтаксического анализа, если он не поддерживает пользовательские параметры), прежде чем решить, как он должен действовать.

Это изменение также отражено в спецификации CSS-переменных в разделе 2. (о котором я также рассказываю здесь ):

Пользовательское свойство – это любое свойство, имя которого начинается с двух дефисов (U+002D ДЕФИС-МИНУС), например --foo. Этому соответствует продукция <custom-property-name>: она определяется как любой допустимый идентификатор, начинающийся с двух дефисов.

Таким образом, дефисы используются, потому что они вписываются в существующую грамматику с небольшими изменениями парсера и удваиваются, в частности, для предотвращения конфликтов с префиксами поставщиков (обратите внимание, что дефисы и символы подчеркивания взаимозаменяемы для префиксов поставщиков, поэтому одиночное подчеркивание тоже не урежет его) .

1 На самом деле я дал это же самое рассуждение в ответ на чей-то вопрос всего несколько недель назад, хотя их вопрос не был о выбранном префиксе для имен пользовательских реквизитов.

person BoltClock    schedule 10.03.2017
comment
Я не могу это подтвердить, но смутно припоминаю, что слышал, что --prop повторно использует существующий синтаксис префикса поставщика, но с нулевым поставщиком. Таб Аткинс официально заявил, что хочет сохранить $ для чего-то более похожего на прямую интерполяцию. - person Tigt; 31.05.2017

arrow_upward
1
arrow_downward

Я думаю, что это потенциально было каким-то образом связано с тем, что у поставщиков есть свой собственный префикс, в котором атрибуты, обозначенные дефисом, игнорируются, если они не поняты браузером/парсером. Я думаю. Это также один из способов, который не конфликтует ни с одной другой функцией или объектом CSS, которые уже существуют.

Например, такие препроцессоры, как LESS, используют символ @, тогда как SASS использует символ $. Это обсуждалось на Software Engineering SE, у которого есть довольно приличный ответ.

По сути, похоже, что это было сделано из соображений совместимости превыше всего. Можно возразить, что также легко обозначить переменную по сравнению с другими вещами, такими как символ & и символ %.

Вот некоторые дополнительные сведения о различиях переменных CSS. на CSS Tricks, который включает в себя ванильный CSS, LESS и SASS и т. д.

person Community    schedule 09.03.2017

arrow_upward
0
arrow_downward

Я думаю, что это связано с обратной совместимостью. Когда вы добавляете что-то в CSS, вы не только должны убедиться, что синтаксис может быть проанализирован однозначно, вы должны убедиться, что новая функция не повлияет на то, как старые браузеры анализируют те части таблицы стилей, которые они действительно могут понять. .

Поскольку переменные могут быть объявлены внутри набора правил, один дефис может вызвать путаницу с префиксами поставщиков. И имя класса в селекторе класса фактически не может начинаться с двух дефисов, по крайней мере, в спецификация CSS 2.1.

person klumme    schedule 10.03.2017