css - 为什么 CSS 不支持常量？

Question

<分区>

Answer 1

当前状态 [2015 年 12 月更新]

W3C 发布了 draft about CSS variables上次编辑此答案仅一个月后。而这个月has brought that draft up to a Candidate Recommendation .它将至少在 2016 年 6 月之前接受审查。A test suite可用。

所以，总而言之，CSS会有变量，也叫"custom properties" :

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. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.

Example 1

Custom properties define variables, referenced with the var() notation, which can be used for many purposes. For example, a page that consistently uses a small set of colors in its design can store the colors in custom properties and use them with variables:

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

The naming provides a mnemonic for the colors, prevents difficult-to-spot typos in the color codes, and if the theme colors are ever changed, focuses the change on one simple spot (the custom property value) rather than requiring many edits across all stylesheets in the webpage.

Unlike other CSS properties, custom property names are case-sensitive.

此功能仅在 Firefox and Chrome 中实现目前，它(可能)需要相当长的时间才能在当前浏览器中实现。

2012 年的旧答案

这是 2012 年 3 月的原始答案。它早于“官方”W3C 草案和实验性浏览器实现。

为什么 CSS 1 或 2 中没有 CSS 变量？

编辑:这已经被 CSS 之父 Håkon Wium Lie 质疑 (Opera Watchblog (Wayback machine)):

Bernie Zimmermann: Håkon, why doesn't CSS support constants? Being able to assign an RGB value to a constant, for instance, could make stylesheet maintenance a lot more manageable. Was it just an oversight?

Hakon: No, we thought about it. True, it would have saved some typing. However, there are also some downsides. First, the CSS syntax would have been more complex and more programming-like. Second, what would be the scope of the constant? The file? The document? Why? In the end we decided it wasn't worth it.

所以它不在标准中，因为他们认为不值得。

解决方法

您定义的常量或变量只是占位符。因为这样的占位符只有在同一个声明中使用时才有意义，所以它是无用的，因为分组已经提供了这种机制:

When several selectors share the same declarations, they may be grouped into a comma-separated list.^{CSS2:Grouping}

因此，与其在十个选择器中使用一种颜色，不如收集通用声明并将它们放在一起更好。而不是

.header{
    color: red;
}
.section:nth-of-type(2n) > .ridi.culous > .article:hover{
    color: red;
}
.footer{
    color: blue;
    border: 1px solid blue;
}

使用

/* Color definitions */
.header,
.section:nth-of-type(2n) > .ridi.culous > .article:hover{
    color: red;
}

.footer{
    color: blue;
}

/* border definitions */
.footer{
    border: 1px solid;
}

尽可能使用继承。

请注意，如果您使用抽象/简单类，您可以几乎声明某种变量

.margin5em{
    margin: 5em;
}
.corporateIdentityBackgroundColor{
    background-color: #881200;
}
.corporateIdentityBackgroundImage{
    background-image: url(we/are/awesome/corporation);
}
.backgroundCenter{
    background-position: center center;
}
.backgroundNoRepeat{
    background-repeat: no-repeat;
}

这将使您能够使用

<div class="corporateIdentityBackgroundImage backgroundCenter backgroundNoRepeat">Ridiculos long class names</div>
<div class="article">
  <p class="margin5em">Yesterday I found a new hobby: Creating class names that are longer then most common words.</p>
</div>

另见:

• http://icant.co.uk/articles/cssconstants/