我可以在CSS变量中添加类名吗? [英] Can I add a classname to a CSS variable?

问题描述

是否可以在CSS变量中添加类名，或者是否可以通过其他方法进行设置，这样我就不必直接通过javascript操作每个变量了?我想将我所有的样式都保留在CSS中，并仅使用JS打开相关的类.例如，如果在CSS中可能发生类似情况:

Is it possible to add a classname to a CSS variable or is there some other way to set it up so that I don't have to manipulate each individual variable directly via javascript? I'd like to keep all my styles in CSS and simply turn on relevant classes with JS. For example, If something like this was possible in CSS:

:root.white{ --bgcol:#FFF; --col:#000; }
:root.black{ --bgcol:#000; --col:#FFF; }

然后我可以从javascript中切换 .black 或 .white 类，以触发所有变量的更改.这种设置的最佳方法是什么?

Then I could then just toggle the .black or .white class from javascript to trigger all vars to change. What's the best approach for this type of setup?

推荐答案

坦率地说，这是最好的方法(与大多数习惯用法一样)-使用类名，如果不是完全分开的样式表(

That's frankly the best (as in most idiomatic) approach — the use of class names, if not altogether separate stylesheets (as has been tradition for many, many years), to theme entire layouts via custom properties. It's the most "fundamentally CSS" approach with JavaScript merely being the glue that makes the theme switching work. You really can't do much better than that.

对于那些不知道:root 是什么意思，并且想知道确切在哪里应用类名的人，这是 html 元素( body ).因此，这里没有什么特别的事情-您只需在 html 元素上切换类名.碰巧，由于习惯性地为文档根元素定义了全局自定义属性，因为它位于继承链的顶层.

For those unaware what :root means and wondering where exactly the class names are being applied, it's the html element (the parent of body). So there is nothing special going on here — you're simply switching class names on the html element. It just happens that global custom properties are conventionally defined for the document root element since it's at the top level of the inheritance chain.

如果您有任何与主题无关的自定义属性以及适用于根元素的样式属性(即非自定义属性)，请将其保留在自己的不合格:root 规则中，与您的主题自定义属性，因此它们不会受到主题切换的影响.这是一个示例:

If you have any theme-agnostic custom properties, as well as style properties (i.e. not custom properties) that apply to the root element, keep them in their own unqualified :root rule, separate from your themed custom properties, so they won't be affected by theme switching. Here's an example:

const root = document.documentElement;

// Default theme - should assign declaratively in markup, not JS
// For a classless default theme, move its custom properties to unqualified :root
// Again, keep it separate from the other :root rule that contains non-theme props
// Remember, the cascade is your friend, not the enemy
root.classList.add('white');

document.querySelector('button').addEventListener('click', function() {
  root.classList.toggle('white');
  root.classList.toggle('black');
});

:root {
  --spacing: 1rem;
  color: var(--col);
  background-color: var(--bgcol);
}

:root.white {
  --bgcol: #FFF;
  --col: #000;
}

:root.black {
  --bgcol: #000;
  --col: #FFF;
}

p {
  margin: var(--spacing);
  border: thin dashed;
  padding: var(--spacing);
}

<button>Switch themes</button>
<p>Hello world!

这篇关于我可以在CSS变量中添加类名吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！