CSS 中是否有任何技术限制导致决定使用 `--` 作为 vars？答案

【问题标题】：Were there any technical limitations within CSS that led to the decision of using `--` for vars?CSS 中是否有任何技术限制导致决定使用 `--` 作为 vars？
【发布时间】：2017-03-12 00:04:20
【问题描述】：

随着 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-* 属性所做的那样，但有些方面与 Simon 和 Sylvain 的讨论主张使用全名，因为有一些令人困惑的情况，例如“--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 是相当独特的！无论如何，为什么使用两个减号而不是单个字符的问题；也许他们害怕他们的单个字符用完了。其他大多数已经在使用中。
独特不开始解释！完全明白你在说什么，我想如果他们考虑用完，为什么不只使用一个-？我知道可能有几个原因（或没有），但我只是感兴趣是否已经讨论/记录了最终让他们到达那里的推理

标签： css w3c css-variables

【解决方案1】：

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

从消息中提到的电信的minutes 中，您可以看到避免与以单个破折号开头的供应商前缀发生冲突的假设是正确的。 -- 的使用确实需要一个小的解析器更改，因为idents normally cannot start with double dashes（正如 klumme 指出的那样）。我不确定现有的实现是如何解析 parse(d) 声明的，但是可以肯定地假设我的推理仍然成立：因为 idents 可以从一个破折号开始，使用第一个破折号不会立即导致解析错误，因此解析器可以在决定应该如何处理之前确定它是在查看 <property> 还是 <custom-property-name>（或者然后如果它不支持自定义道具，则会遇到解析错误）继续。

这一变化也反映在 css-variables 规范中，在 section 2（我也介绍了 here）中：

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

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

¹_{事实上，就在几周前，我给了this very same reasoning 以回应其他人的问题，尽管他们的问题与选择的前缀无关用于自定义道具名称。}

【讨论】：

我无法备份它，但我隐约记得听说“--prop”重用了现有的供应商前缀语法，但使用了“空供应商”。 Tab Atkins 公开表示他想save $ for something more like straight interpolation。

【解决方案2】：

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

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

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

这里有一些 additional reading 关于 CSS 变量在 CSS Tricks 上的差异，包括 vanilla CSS、LESS 和 SASS 等。

【讨论】：

【解决方案3】：

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

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

【讨论】：