这是詹姆斯·斯坦利（James Stanley）的一个有趣的主意：一个CSS文件（可能每天更新），其中包含“季节性”颜色（例如，春天是绿色，秋天是橙色）的CSS自定义属性。然后，您将使用这些值来为您的网站设置主题，并且知道这些颜色每天都会稍有变化。

这是我在编写本文时得到的：

:root {
--seasonal-bg: hsl(-68.70967741935485,9.419354838709678%,96%);
--seasonal-bgdark: hsl(-68.70967741935485,9.419354838709678%,90%);
--seasonal-fg: hsl(-68.70967741935485,9.419354838709678%,30%);
--seasonal-hl: hsl(-83.70967741935485,30.000000000000004%,50%);
--seasonal-hldark: hsl(-83.70967741935485,30.000000000000004%,35%);
}
我认为，如果提供的CSS文件只是自定义属性，而不是自以为是的其他样式（例如，设置主体背景等的样式），那会更好玩。这样，您可以选择任何方式实现颜色，而不会产生任何副作用。

CSS作为API？
这使我认为，像这样的CDN托管的CSS文件可能还有其他有用的东西，例如今天在伪内容中使用的日期，或其他对时间敏感的东西。也许是月相？体育比分？！今日例汤？！

/* The soup of the day is: / .soup::after { content: var(--soupOfTheDay); / lol kinda */
}
它几乎就像一个易于使用的数据API。如今，伪内容甚至是可访问的内容-但是您不能选择伪元素的文本，因此，请勿将其理解为将CSS用作内容API的实际认可。

自定义属性的灵活性
威尔·博伊德（Will Boyd）刚刚写了一篇博客，介绍了可以在自定义属性中添加的内容。它们非常灵活。几乎任何东西都是有效的自定义属性值，然后用法往往会按照您的想法行事。

body {
/* totally fine */
--rgba: rgba(255, 0, 0, 0.1);
background: var(--rgba);

/* totally fine */
--rgba: 255, 0, 0, 0.1;
background: rgba(var(--rgba));

/* totally fine */
--rgb: 255 0 0;
--a: 0.1;
background: rgb(var(--rgb) / var(--a));
}

body::after {
/* totally fine */
--song: "I need quotes to be pseudo content \A and can't have line breaks without this weird hack \A but still fairly permissive (💧💧💧) ";
content: var(--song);
white-space: pre;
}
Bram Van Damme在报道Will的文章时抓住了这种灵活性：

这就是为什么您可以使用CSS自定义属性执行以下操作的原因：

•执行条件计算

•将数据从CSS内传递到JavaScript

•将肤色/头发颜色修饰剂注入表情符号

•使用一个自定义属性切换多个值 （--foo: ; hack）

Bram指出了自定义属性可以实现的“基本”状态翻转质量：

:root {
--is-big: 0;
}

.is-big {
--is-big: 1;
}

.block {
padding: calc(
25px * var(--is-big) +
10px * (1 - var(--is-big))
);
border-width: calc(
3px * var(--is-big) +
1px * (1 - var(--is-big))
);
}
添加一些复杂性，您将获得The Raven（具有自定义属性的媒体查询）。

我绝对希望看到CSS中发生某些事情，以使此操作更容易。将CSS自定义属性用于一般状态将是惊人的。当UI处于任意状态时，我们可以应用任意样式！想一想现在的媒体查询有多有用，或者说容器查询将有多有用，但是由于它是任意状态，而不仅仅是陈述那些事情暴露在外，因此变得更加复杂。

Bram还谈到了Lea Verou所说的“高级定制属性”：

/* Theoretical! */

.square {
width: 2vw;
padding: 0.25vw;
aspect-ratio: 1/1;

@if (var(--size) = big) {
width: 16vw;
padding: 1vw;
}
}

.my-input {
@if(var(--pill) = on) {
border-radius: 999px;
}
}
关于那个命名
将它们称为“ CSS变量”，这是非常常见且可以理解的。您会经常阅读（我写过）类似“ CSS变量（aka CSS定制属性）”或“ CSS定制属性（aka CSS变量）”的句子。ŠimeVidas最近指出，有一种相当正确的方式来引用这些事物：--this-part是自定义属性，var(--this-part)是变量，它来自spec中的用法。

JavaScript库状态…自动吗？
我想起了这个Vue提案。我不确定它是否可以随处携带，但是其想法是组件的状态会自动显示为CSS自定义属性。

由于具有color该组件的状态的一部分，因此--color可以作为该组件的CSS的状态使用。我认为这是个好主意。

如果每次您useState在React中使用CSS定制属性并将其:root自动更新，该怎么办？例如，如果您这样做：

import React, { useState } from 'https://cdn.skypack.dev/[email protected]^16.13.1';
import ReactDOM from 'https://cdn.skypack.dev/[email protected]^16.13.1';

const App = () => {
const [ activeColor, setActiveColor ] = useState("red");
return(

Active Color: {activeColor}

{setActiveColor("red")}}>red {setActiveColor("blue")}}>blue
);
}

ReactDOM.render(,
document.getElementById("root"))
而且您知道自己可以做到：

.box {
border-color: 2px solid var(--activeColor);
}
因为状态自动将其自身映射到自定义属性。有人应该useStateWithCustomProperties勾上钩子或类似的东西。#freeidea

像React和Vue这样的库都用于构建UI。我认为他们管理的状态自动暴露给CSS很有意义。

浏览器能否为我们提供更多的页面状态作为环境变量？
说到CSS应该了解的状态，我已经看到了很多演示，它们通过将诸如当前鼠标位置或滚动位置之类的内容映射到CSS上来有趣。我认为要求将数据本地暴露给CSS并不是完全不合理的。我们已经有了环境变量的概念，例如env(safe-area-inset-top)，我可以看到它被用来显示页面状态，例如env(page-scroll-percentage)或env(mouseY)。