4

With the introduction of css vars, I would like to know the reasoning of of why -- would be chosen as a way of denoting a var.

Considering CSS has a semi capable calc function, I feel like the -- could easily be confused for a decrement operator in other languages.

I am curious if there is any historical significance or technical limitation that led to choosing --. The double in particular perplexes me, when CSS markers are generally singles (#, ., @, etc). Also using a symbol already being used by other things also is interesting (especially when its valid for a class name to begin with --).

Example:

@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);
    }
}

Disclaimer

Some might argue the validity of this question, but understanding the why is a key technique to remembering a particular concept.

The only discussion I can find related to it:

In the telcon today, we resolved to use a "--" prefix to indicate custom properties and other custom things.

We discussed whether the prefix is maintained or dropped when referring to the custom property from a var() function, but didn't actually resolve. Discussion in the call leaned toward dropping the prefix, like I do currently with var-* properties, but some side discussion with Simon and Sylvain argued for using the full name, as there are confusing cases like "--0" or "----".

So, while I understand the potential confusion caused by authors possibly thinking that var() can take any property name as an argument, I think it's overruled by the confusion over what needs to be escaped in various circumstances. Escaping rules are always very confusing to authors, so I'm going to go with "use the custom property name literally as the var() argument".

Reference:

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

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

4

3 回答 3

4

除了避免与其他答案中提到的以单个破折号开头的供应商前缀发生冲突外，请记住 CSS ident 的语法除了字母、数字、破折号和下划线之外不允许任何其他内容（请参阅第 4.1 节。 CSS2 的第 3条）。如果自定义属性由任何其他符号表示，则每个现有的 CSS 实现都需要更新甚至重写其解析器，以适应用于自定义属性名称的任何符号。1

从消息中提到的电话会议记录中，您可以看到避免与以单个破折号开头的供应商前缀发生冲突的假设是正确的。使用--did 需要对解析器进行较小的更改，因为标识通常不能以双破折号开头（正如 klumme 指出的那样）。我不确定现有的实现是如何解析 parse(d) 声明的，但是可以肯定地假设我的推理仍然成立：因为 idents可以从一个破折号开始，使用第一个破折号不会立即导致解析错误，所以解析器可以确定它是在看 a<property>还是 a <custom-property-name>（或者然后如果它不支持自定义道具，则会遇到解析错误），然后再决定如何进行。

这一变化也反映在 css-variables 规范的第 2 节中（我也在这里介绍）：

自定义属性是名称以两个破折号 (U+002D HYPHEN-MINUS) 开头的任何属性，例如--foo. <custom-property-name> 产生式对应于此：它被定义为以两个破折号开头的任何有效标识符。

所以使用破折号是因为它们适合现有的语法，只需要进行微小的解析器更改，特别是加倍以防止与供应商前缀冲突（请注意，破折号和下划线对于供应商前缀是可互换的，因此单个下划线也不会削减它） .

1 事实上，就在几周前，我在回答别人的问题时给出了同样的理由，尽管他们的问题不是关于自定义道具名称的选择前缀。

于 2017-03-10T14:29:59.667 回答
1

我认为这可能在某种程度上与供应商如何拥有自己的前缀有关，如果浏览器/解析器不理解连字符表示的属性将被忽略。我认为。这也是一种不会与任何其他已存在的 CSS 函数或对象发生冲突的方式。

例如，像LESS这样的预处理器使用@符号，而SASS使用$符号。这在Software Engineering SE上进行了讨论，有一个相当不错的答案。

从本质上讲，这似乎是出于兼容性原因。&有人可能会争辩说，与符号和符号等其他事物相比，表示什么是变量也很容易%。

这是关于 CSS Tricks 上 CSS 变量差异的一些额外阅读，其中包括 vanilla CSS、LESS 和 SASS 等。

于 2017-03-09T15:15:34.447 回答
0

我的想法是它与向后兼容性有关。当你在 CSS 中添加一些东西时，你不仅要确保语法可以被明确地解析，你还必须确保新特性不会影响旧浏览器如何解析它们实际上能够理解的样式表部分.

由于可以在规则集中声明变量，因此一个连字符可能会导致与供应商前缀混淆。并且类选择器中的类名实际上不允许以两个连字符开头，至少在CSS 2.1 规范中是这样。

于 2017-03-10T14:15:29.890 回答