css - CSS 中是否有任何技术限制导致决定将 `--` 用于 vars？

Question

随着 css var 的引入，我想知道 为什么 -- 会被选为表示 var 的原因。

考虑到 CSS 具有半功能 calc 功能，我觉得 -- 很容易与其他语言中的减量运算符混淆。

我很好奇是否有任何历史意义或技术限制导致选择 --。当 CSS 标记通常是单个标记(#、.、@ 等)时，double 尤其让我感到困惑。此外，使用已被其他事物使用的符号也很有趣(尤其是当它对以 -- 开头的类名有效时)。

示例:

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

免责声明

有些人可能会争论这个问题的有效性，但了解原因是记住特定概念的关键技巧。

我能找到的唯一相关讨论:

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

引用:

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

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

Answer 1

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

来自minutes通过消息中提到的电话，您可以看到避免与以单个破折号开头的供应商前缀发生冲突的假设是正确的。 --的使用确实需要对解析器进行较小的更改，因为 idents normally cannot start with double dashes (正如 klumme 指出的那样)。我不确定现有的实现是如何解析 (d) 声明的，但是可以安全地假设我的推理仍然成立:因为 idents 可以 以一个破折号开头，所以使用第一个破折号不会立即导致解析错误，因此解析器可以确定它是否正在查看 <property>或 <custom-property-name> (或者 然后 如果它不支持自定义 Prop 会遇到解析错误)，然后再决定应该如何进行。

此更改也反射(reflect)在 css 变量规范中，在 section 2 中(我也介绍了 here ):

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. The <custom-property-name> production corresponds to this: it’s defined as any valid identifier that starts with two dashes.

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

---

¹ _{事实上，我给了this very same reasoning就在几周前回答别人的问题时，尽管他们的问题不是关于为自定义 Prop 名称选择的前缀。}