使用CSS变量进行主题化：全局变量和局部变量

将CSS变量设置为设计系统的主题可能会有些棘手: 如果它们太显眼, 系统就会失去一致性。 如果它们太全局化, 你就会失去粒度。

也许我们可以解决这两个问题。 我想尝试将设计系统变量归结为两种类型: 全局变量和组件变量。 全局变量将使我们在组件间保持一致性。组件变量将给我们带来粒度和隔离。让我用一个相当简单的组件作为例子来告诉你怎么做。

全局变量

全系统变量是为了保持组件间的一致性而定义的一般概念。

作为一个例子，以一个.alert组件开始，假设我们希望保持页边空白和填充的所有空间的一致性。我们可以首先定义全局空间:

然后在我们的组件上使用:

这种做法的主要好处是:

1. 它为分隔符创造了一个单一的真理来源，为作者使用我们的系统定制它提供了一个单一的点。
2. 它达到了一致性，因为每个组件都遵循相同的间距。
3. 它为设计者和开发者提供了一个共同的参考点。只要设计人员遵循相同的间距限制，代码的翻译就是无缝的

但这也带来了一些问题:

1. 系统通过生成依赖树来失去模块性。由于组件依赖于全局变量，因此它们不再是孤立的。
2. 它不允许作者在不覆盖CSS的情况下自定义单个组件。例如，要更改警报的填充而不产生系统范围的移动，他们必须覆盖警报组件：