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

Question

我目前正在与一个团队合作开发一组web组件，这些组件应该是客户公司开发的当前和即将推出的web应用程序的基础。

我希望这些组件支持颜色主题化，这是支持黑暗模式的第一个用例。

现行方法

• I在colorpalette.css文件中定义了客户的公司设计颜色(这些颜色只是一个例子)：

根{-颜色-蓝色：#004994；-颜色-浅蓝：#0095 red；-颜色-浅绿色：#afca06 06；-颜色-浅灰色：#9c9c9c；-颜色-绿色：#51ae31；-颜色-灰色：#555555；-颜色-橙色：#f 39200；-颜色-红色：#d40f14；-颜色-青绿色：#008c8e；-颜色-紫色：#b80d78；-颜色-黄色：#ffcc00 00；-颜色-白色：#ffffff；--颜色-黑色：#000000；}

• 我正在确保使用或定义颜色的所有其他文件都只使用该文件中的颜色。这将导致一个文件colors.css，在该文件中，我开始定义每个主题的不同颜色：

@import“./color palette.css”；：根{-bg-颜色-按钮:var(-颜色-浅灰色)；-文本-颜色-按钮:var(-颜色-黑色)；-边框-颜色-按钮:var(-颜色-灰色)；}：根数据-主题=暗{-bg-颜色-按钮:var(-颜色-灰色)；-文本-颜色-按钮:var(-颜色-白色)；-边框-颜色-按钮:var(--彩色-浅灰色)；}

到目前为止，我对这种方法很满意。

问题

现在，我开始添加这些按钮的不同语义版本：.btn-danger、.btn-success等，这些按钮应该使用颜色作为传输这些语义的手段。

可能的解决方案--两种不同的备选方案

在这里，我不确定如何实现这一目标，因为我看到了两种选择：

1. 为这些语义创建新的变量，并以它们的名称承载语义：

根{-bg-彩色-按钮-成功:var(-颜色-浅绿色)；-文本-彩色-按钮-成功:var(-彩色-黑色)；-边框-颜色-按钮-成功:var(-颜色-绿色)}}

并在按钮样式定义中使用这些内容：

.btn {背景颜色:var(-bg-颜色-按钮)；颜色:var(-文本-颜色-按钮)；边框颜色:var(-边框-颜色-按钮)；}.btn.btn-成功{背景颜色:var(-bg-颜色-按钮-成功)；颜色：(-文本-颜色-按钮-成功)；边框颜色:var(-边框-颜色-按钮-成功)；}

- Pros 
    - You can re-theme the whole application by modifying only two files.

- Cons 
    - 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 a different color.
    - If you later want to introduce additional button variations, you'd have to edit both `colors.css` and `button.css`.

1. 另一种方法可以是重新定义指定上下文中现有变量的：

.btn {背景颜色:var(-bg-颜色-按钮)；颜色:var(-文本-颜色-按钮)；边框颜色:var(-边框-颜色-按钮)；}.btn.btm-成功{-bg-颜色-按钮:var(-颜色-浅绿色)；-文本-颜色-按钮:var(-颜色-黑色)；-边框-颜色-按钮:var(-颜色-绿色)；}。

- Pros 
    - **alot** less variables.
    - Variables only get redefined in places where they're actually used.
    - Defining new button variants is easier than in the other approach as you only need to edit `button.css`.

- Cons 
    - To retheme the component library, you will probably have to touch every single component's css file in addition to `colorpalette.css` and `colors.css`.

我试图总结一下我所看到的两种方法的优缺点。

问题

其他的理由是选择一种而不是另一种？

提示

请考虑以下，然后最终投票结束：

我知道许多人可能会把这个问题看作是一个离题的话题，因为它吸引了一些固执己见的答案，但我确信这个问题对许多开发人员来说有着实际意义的，因为css自定义属性最近才成为事实上的标准，这通常导致最佳实践的出现非常缓慢。所以固执己见的答案，以及这些观点的原因，正是我在这里有意问的。

这也绝不是Best Practices - CSS Theming的重复，因为这个问题是从2010年开始的，在那里不存在css自定义属性。

Answer 1

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

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

需要更多的变量。因为它们有不同的用途。当您重新设计您的主题，它将帮助您快速改变外观，而不进入所有组件文件。你只需要关心它，以防重新设计主题。因此，我认为不应把它算作坏账。

如果您以后想引入额外的按钮变体，您必须同时编辑colors.css和button.css。

同样，我不认为这是缺点，因为您只需要在两个文件中添加一些额外的代码。这些密码不会影响到以前存在的任何东西。

但是你忘了提到，这个方法最大的骗局。您需要重写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);
}

在这种方法中

通过使用基本颜色变量，如果您只想调整一些灰色的阴影，您只需要更改基本颜色变量，按钮和其他任何东西都将使用作用域变量来更改accordingly.

• By，但是链接到一个新变量，您不需要重写CSS规则，只需编辑一个文件中变量的值就可以轻松地重新设计主题。当然，这种方法仍然有您的第一个解决方案的两个缺点，但我认为可以接受更高优先级的requirements.

。

对我来说，最好的实践应该放在一个特定的环境中，所以这个解决方案是合适的，以防你的首要任务是很容易地重新设计主题。如果您只想使用CSS变量来方便重用，并且没有任何计划来更改变量的值，那么应该为快速编程选择OP的第二个解决方案。