css - 是否有基于 CSS 自定义属性创建可主题化组件变体的最佳实践？

Question

我目前正在与一个团队合作开发一堆 Web 组件，这些组件应该是客户公司开发的当前和即将推出的 Web 应用程序的基础。
我希望这些组件支持颜色主题；第一个用例是支持暗模式。
当前方法

我已经在文件 colorpalette.css 中定义了客户的公司设计颜色(颜色只是一个例子):

:root {
    --color-blue: #004994;
    --color-light-blue: #0095db;
    --color-light-green: #afca06;
    --color-light-grey: #9c9c9c;
    --color-green: #51ae31;
    --color-grey: #555555;
    --color-orange: #f39200;
    --color-red: #d40f14;
    --color-turquoise: #008c8e;
    --color-violet: #b80d78;
    --color-yellow: #ffcc00;
    --color-white: #ffffff;
    --color-black: #000000;
}

我确保所有其他使用或定义颜色的文件只使用该文件中的颜色。这导致文件 colors.css我开始为每个主题定义不同的颜色:

@import "./colorpalette.css";
:root {
    --bg-color-button: var(--color-light-grey);
    --text-color-button: var(--color-black);
    --border-color-button: var(--color-grey);
}

:root[data-theme=dark] {
    --bg-color-button: var(--color-grey);
    --text-color-button: var(--color-white);
    --border-color-button: var(--color-light-grey);
}

到目前为止，我对这种方法很满意。
问题
现在我开始添加这些按钮的不同语义版本: .btn-danger , .btn-success等，它们应该使用颜色作为传输这些语义的手段。
可能的解决方案 - 两种不同的选择
这就是我不确定要采用哪种方式来实现这一目标的地方，因为我看到了两种选择:

创建 新品 这些语义的变量，在它们的名称中带有语义:

:root {
    --bg-color-button-success: var(--color-light-green);
    --text-color-button-success: var(--color-black);
    --border-color-button-success: var(--color-green);
}

并在按钮样式定义中使用这些:

.btn {
    background-color: var(--bg-color-button);
    color: var(--text-color-button);
    border-color: var(--border-color-button);
}
.btn.btn-success {
    background-color: var(--bg-color-button-success);
    color: var(--text-color-button-success);
    border-color: var(--border-color-button-sucess);
}

优点

您可以通过只修改两个文件来重新设计整个应用程序的主题。

缺点

这种方法显然会导致无数的变量，因为我们需要为每个需要应用不同颜色的地方定义一个单独的变量。

如果您以后想引入其他按钮变体，则必须同时编辑 colors.css和 button.css .

另一种方法可能是 重新定义 指定上下文中的现有变量:

.btn {
    background-color: var(--bg-color-button);
    color: var(--text-color-button);
    border-color: var(--border-color-button);
}
.btn.btn-success {
    --bg-color-button: var(--color-light-green);
    --text-color-button: var(--color-black);
    --border-color-button: var(--color-green);
}

优点

很多 变数少。

变量只会在实际使用的地方重新定义。

定义新的按钮变体比其他方法更容易，因为您只需要编辑 button.css .

缺点

要重新主题化组件库，除了 colorpalette.css 之外，您可能还必须接触每个组件的 css 文件。和 colors.css .

我试图总结我看到的两种方法的优缺点。
问题
哪些是更喜欢一种方式而不是另一种方式的其他原因？
暗示
在最终投票结束之前，请考虑以下事项:
我知道很多人可能认为这个问题是离题的，因为它吸引了自以为是的答案，但我确定这个问题有 很多 对许多开发人员具有实际意义，因为 css 自定义属性最近才成为事实上的标准，这通常会导致最佳实践的出现缓慢。因此，固执的答案以及这些意见的原因正是我在这里特意提出的。
这也绝不是 Best Practices - CSS Theming 的副本。因为这个问题是从 2010 年开始的，当时 css 自定义属性不存在。

Answer 1

在我看来，主题系统的优先级要求很容易改变外观。所以你的第一个解决方案适合这种情况。让我们谈谈它的缺点。

This approach obviously results in a myriad of variables, as we need to define a separate variable for each place where we need to apply adifferent color.

需要更多的变量。因为它们有不同的用途。当您重新设计主题时，它将帮助您快速更改外观，而无需访问所有组件文件。而且您只需要关心它，以防重新设计主题。所以我认为它不应该被视为缺点。

If you later want to introduce additional button variations, you'dhave to edit both colors.css and button.css.

同样，我不认为这是缺点，因为您只需要在 2 个文件中添加一些额外的代码。而这些代码不会影响之前存在的任何东西。
但是你忘了提 最大的骗局这种方法的。你需要重写 CSS 规则。如果我们使用渐变背景会发生什么？代码将是这样的:

.btn {
    background: linear-gradient(to left, var(--text-color-button-1), var(--text-color-button-2) 50%, var(--text-color-button-3) 75%, var(--text-color-button-4) 75%);
    color: var(--text-color-button);
    border-color: var(--border-color-button);
}
.btn.btn-success {
    background: linear-gradient(to left, var(--text-color-button-success-1), var(--text-color-button-success-2) 50%, var(--text-color-button-success-3) 75%, var(--text-color-button-success-4) 75%);
    color: var(--text-color-button-success);
    border-color: var(--border-color-button-sucess);
}

如果我们要将 50% 的数字更改为另一个数字，那将是一场噩梦。
因此，让我们将您的两种方法合二为一，以解决它们的缺点。
这是那些想要快速扫描的人的解决方案 :
color.css

--color-red-100: red;
--color-red-500: red;
--color-red-900: red;
--color-green-100: green;
--color-green-500: green;
--color-green-900: green;

--color-bg-button-1: var(--color-red-100);
--color-bg-button-2: var(--color-red-500);
--color-bg-button-3: var(--color-red-900);
--color-bg-button-4: var(--color-red-100);

--color-bg-button-success-1: var(--color-green-100);
--color-bg-button-success-2: var(--color-green-500);
--color-bg-button-success-3: var(--color-green-900);
--color-bg-button-success-4: var(--color-green-100);

button.css

.btn {
    background: linear-gradient(to left, var(--text-color-button-1), var(--text-color-button-2) 50%, var(--text-color-button-3) 75%, var(--text-color-button-4) 75%);
}
.btn.btn-success {
    --text-color-button-1: var(--color-bg-button-success-1);
    --text-color-button-2: var(--color-bg-button-success-2);
    --text-color-button-3: var(--color-bg-button-success-3);
    --text-color-button-4: var(--color-bg-button-success-4);
}

在这种方法中 :

通过使用基色变量，如果你只是想调整一些灰色阴影，你只需要改 rebase 色变量，按钮和其他任何东西都会相应地改变。

通过使用作用域变量但链接到一个新变量，您无需重写 CSS 规则，只需通过编辑一个文件中的变量值即可轻松重新设计主题。

当然，这种方法仍然有你的第一个解决方案的两个缺点，但我认为它可以被更高优先级的要求所接受。

对我来说，最佳实践应该放在特定的上下文中，因此这个解决方案非常适合您的首要任务是轻松地重新设计主题。如果您只想使用 CSS 变量轻松重用并且没有任何更改变量值的计划，那么应该选择 OP 的第二个解决方案进行快速编程。