自定义属性为状态

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

我认为，如果提供的CSS文件只是自定义属性，而不是自以为是的其他样式（例如，设置主体背景等的样式），那会更好玩。这样，您可以选择任何方式实现颜色，而不会产生任何副作用。

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

/ *＆lt; div class =＆＃34; soup＆＃34;＆gt;当天的汤是：＆lt; / div＆gt; * /。soup :: after {content：var（-soupOfTheDay）; / *大声笑* /}

它几乎就像一个易于使用的数据API。如今，伪内容甚至是可访问的内容-但是您无法选择伪元素的文本，因此，请勿将其理解为将CSS用作内容API的实际认可。

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

body {/ *完全正确* / --rgba：rgba（255，0，0，0.1）;背景：var（-rgba）; / *完全可以* / --rgba：255，0，0，0.1;背景：rgba（var（-rgba））; / *完全可以* / --rgb：255 0 0; --a：0.1;背景：rgb（var（-rgb）/ var（-a））;} body ::之后{/ *完全好* /-歌曲：＆＃34;我需要引号是伪内容\ A并且可以＆ ＃39;没有这种奇怪的破解\ A的换行符，但仍然相当宽松（still）＆＃34 ;;内容：var（-song）;空格：前置；}

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

：root {---is-big：0;}。is-big {--is-big：1;}。block {padding：calc（25px * var（-is-big）+ 10px *（1-var （-大）））;边框宽度：calc（3px * var（-is-big）+ 1px *（1-var（-is-big）））;}

添加一些复杂性，您将获得The Raven（带有自定义属性的媒体查询）。

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

Bram也谈到了这一点，并提到了Lea Verou所说的“高级定制属性”：

/ *理论上！ * /。square {宽度：2vw;填充：0.25vw;长宽比：1/1； @if（var（-size）= big）{width：16vw;填充：1vw; }}。my-input {@if（var（-pill）= on）{border-radius：999px; }}

将它们称为“ CSS变量”，这是非常常见且可以理解的。您会经常阅读（并且我已经写过）类似于“ CSS变量（aka CSS定制属性）”或“ CSS定制属性（aka CSS变量）”的句子。ŠimeVidas最近指出，有一种相当正确的方式来引用这些句子事情：--this-part是自定义属性，而var（-this-part）是变量，它直接来自规范中的用法。

我想起了这个Vue提案。我不确定它是否在任何地方，但其想法是组件的状态会自动显示为CSS自定义属性。

＆lt;模板＆gt; ＆lt; div class =＆＃34; text＆＃34;＆quot; Hello＆lt; / div＆gt;＆lt; / template＆gt;＆lt; script＆gt;导出默认{data（）{return {color：＆＃39; red＆＃39; }}}＆lt; / script＆gt;＆lt; style vars =＆＃34; {color}＆＃34;＆gt; .text {color：var（-color）;}＆lt; / style＆gt;

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

如果每次您在React中使用useState时，CSS自定义属性都放在：root上并自动更新，该怎么办？例如，如果您这样做：

从＆＃39; https：//cdn.skypack.dev/ [受电子邮件保护] ^ 16.13.1＆＃39 ;;从＆＃39; https：//cdn.skypack.dev/导入ReactDOM导入React，{useState} [受电子邮件保护] ^ 16.13.1＆＃39; const App =（）=＆gt; {const [activeColor，setActiveColor] = useState（＆＃34; red＆＃34;）; return（＆lt; div className =＆＃34; box＆＃34;＆gt; h1＆gt;有效色：{activeColor}＆lt; / h1＆gt;＆lt; button onClick = {（）=＆gt; {setActiveColor（＆＃34;红色＆＃34;）}}＆gt;红色＆lt; / button＆gt;＆lt; button onClick = {（）=＆gt; {setActiveColor（＆＃34; blue＆＃34;）}}＆gt;蓝色＆lt; / button＆gt;＆lt; / div＆gt ;）;} ReactDOM.render（＆lt; App />,document.getElementById("root"））

因为状态自动将其自身映射到自定义属性。有人应该制作一个useStateWithCustomProperties钩子或类似的东西。 #freeidea

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

说到CSS应该知道的状态，我已经看了很多演示，它们通过将诸如当前鼠标位置或滚动位置之类的内容映射到CSS上来有趣。 我认为要求将这些数据本地暴露给CSS并非完全没有道理。 我们已经有了环境变量的概念，例如env（safe-area-inset-top），我可以看到它被用来暴露页面状态，例如env（page-scroll-percentage）或env（mouseY）。