CSS `Theming` `Custom Property Sets` (提案)：更强大的主题变量组

嘿，大家好！今天咱们来聊聊CSS主题化这事儿，但不是那种老生常谈的“换个颜色就叫主题”的简单操作。我们要聊的是一个更有意思、更强大的东西：CSS自定义属性集（Custom Property Sets），当然，这还只是个提案，但它代表着CSS主题化的未来方向。

一、啥是CSS主题化？为啥我们需要更强大的主题化工具？

简单来说，CSS主题化就是允许我们在不修改大量CSS代码的前提下，快速切换网站或应用的外观风格。想象一下，你有一个电商网站，白天用明亮的主题，晚上用暗黑模式，或者针对不同节日推出不同的主题配色，这就是主题化的应用场景。

传统的主题化方法通常依赖于：

CSS预处理器变量 (Sass, Less 等): 虽然强大，但在编译时就已经确定，无法在运行时动态切换。
CSS自定义属性 (CSS Variables): 相对灵活，但当主题变量数量增多，结构复杂时，管理起来会变得非常繁琐。你可能会看到像下面这样的代码：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #f8f9fa;
  --text-color: #212529;
  --border-radius: 0.25rem;
  /* ... 更多变量 ... */
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

.button {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
}

如果我们要切换主题，就需要修改:root下的所有变量，这无疑是一项重复且容易出错的工作。而且，当组件变得复杂，需要管理的状态增多，这样的方式会迅速变得难以维护。

这就是为什么我们需要更强大的主题化工具：自定义属性集。 它可以将相关的自定义属性组织在一起，形成一个逻辑上的“主题块”，从而简化主题切换和管理。

二、自定义属性集：概念与语法

自定义属性集，顾名思义，就是一组相关的CSS自定义属性的集合。它允许我们将主题相关的变量组织在一起，并像一个整体一样进行管理。

语法：

@property-set theme-light {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #f8f9fa;
  --text-color: #212529;
}

@property-set theme-dark {
  --primary-color: #00bfff;
  --secondary-color: #9fa8da;
  --background-color: #303030;
  --text-color: #f0f0f0;
}

上面的代码定义了两个属性集：theme-light 和 theme-dark。它们分别包含了对应主题的颜色变量。

使用方法：

使用 use 规则可以将属性集应用到特定的选择器上：

body {
  use: theme-light; /* 应用 light 主题 */
}

.button {
  use: theme-light; /* 应用 light 主题 */
}

@media (prefers-color-scheme: dark) {
  body {
    use: theme-dark; /* 如果用户喜欢暗黑模式，应用 dark 主题 */
  }
  .button {
      use: theme-dark; /* 如果用户喜欢暗黑模式，应用 dark 主题 */
  }
}

或者，你也可以在 JavaScript 中动态切换属性集：

function setTheme(themeName) {
  document.body.style.setProperty('use', themeName); //直接设置use属性
}

// 切换到 dark 主题
setTheme('theme-dark');

三、自定义属性集的优势

与传统的主题化方法相比，自定义属性集具有以下优势：

更好的组织性： 将相关的变量组织在一起，使代码更易于阅读和维护。
更简洁的切换： 只需切换 use 规则的值，即可快速切换主题，无需修改大量的CSS变量。
更高的可读性： @property-set 规则可以清晰地表达主题的意图。
更强的可扩展性： 可以轻松地添加新的属性集，以支持更多的主题。
CSS原生支持： 无需依赖预处理器，减少了构建过程的复杂性。

四、更高级的用法

除了基本用法，自定义属性集还可以结合其他CSS特性，实现更高级的主题化效果。

属性集继承： 属性集可以继承其他属性集，减少重复代码。

@property-set theme-base {
  --font-family: sans-serif;
  --border-radius: 0.25rem;
}

@property-set theme-light extends theme-base {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #f8f9fa;
  --text-color: #212529;
}

@property-set theme-dark extends theme-base {
  --primary-color: #00bfff;
  --secondary-color: #9fa8da;
  --background-color: #303030;
  --text-color: #f0f0f0;
}

上面的代码中，theme-light 和 theme-dark 都继承了 theme-base，这意味着它们会自动包含 theme-base 中定义的属性，无需重复定义。

条件属性集： 可以使用 @when 规则，根据不同的条件应用不同的属性集。

@property-set theme-light {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #f8f9fa;
  --text-color: #212529;
}

@property-set theme-light-inverted {
  --primary-color: #f8f9fa;
  --secondary-color: #212529;
  --background-color: #007bff;
  --text-color: #f8f9fa;
}

.element {
  use: theme-light;

  @when (inverted: true) {
    use: theme-light-inverted;
  }
}

在这个例子中，.element 默认使用 theme-light，但如果它具有 inverted 属性（例如 data-inverted="true"），则会使用 theme-light-inverted。

结合@container Queries: 可以根据容器的大小和状态，动态地应用不同的属性集，实现响应式主题。

@property-set theme-small {
  --font-size: 12px;
  --padding: 8px;
}

@property-set theme-large {
  --font-size: 16px;
  --padding: 16px;
}

.container {
  container-type: inline-size; /* 定义容器查询 */
}

.element {
  use: theme-small;

  @container (min-width: 600px) {
    use: theme-large;
  }
}

在这个例子中，.element 默认使用 theme-small，但如果它的容器宽度大于 600px，则会使用 theme-large。

五、实际应用案例：一个简单的按钮组件

让我们通过一个简单的按钮组件，来演示自定义属性集在实际项目中的应用。

HTML:

<button class="button">Click me</button>
<button class="button button--primary">Primary Button</button>
<button class="button button--secondary">Secondary Button</button>

CSS (使用自定义属性集):

@property-set button-base {
  --font-size: 16px;
  --padding: 10px 20px;
  --border-radius: 5px;
  --border: none;
  --cursor: pointer;
}

@property-set button-default extends button-base {
  --background-color: #f0f0f0;
  --text-color: #333;
}

@property-set button-primary extends button-base {
  --background-color: #007bff;
  --text-color: #fff;
}

@property-set button-secondary extends button-base {
  --background-color: #6c757d;
  --text-color: #fff;
}

/*  深色主题  */
@property-set button-default-dark extends button-base {
  --background-color: #333;
  --text-color: #f0f0f0;
}

@property-set button-primary-dark extends button-base {
  --background-color: #00bfff;
  --text-color: #000;
}

@property-set button-secondary-dark extends button-base {
  --background-color: #9fa8da;
  --text-color: #333;
}

.button {
  use: button-base;
  use: button-default;
}

.button--primary {
  use: button-primary;
}

.button--secondary {
  use: button-secondary;
}

/*  应用暗黑模式  */
@media (prefers-color-scheme: dark) {
    .button {
        use: button-default-dark;
    }

    .button--primary {
        use: button-primary-dark;
    }

    .button--secondary {
        use: button-secondary-dark;
    }
}

在这个例子中，我们定义了几个属性集：

button-base: 包含了按钮的基本样式。
button-default, button-primary, button-secondary: 分别定义了不同类型的按钮样式，它们都继承自 button-base。
button-default-dark, button-primary-dark, button-secondary-dark: 定义了深色主题下的按钮样式。

通过 use 规则，我们可以轻松地将不同的属性集应用到不同的按钮上。当需要修改按钮的样式时，只需修改对应的属性集即可。

六、自定义属性集 vs. 其他主题化方案

特性	自定义属性集 (提案)	CSS 自定义属性 (Variables)	CSS 预处理器 (Sass/Less)	CSS-in-JS (Styled Components)
运行时切换	✅	✅	❌	✅
组织性	✅	❌	✅	✅
可维护性	✅	⚠️	✅	✅
性能	理论上更好 (原生)	取决于实现	编译时处理	取决于实现
学习曲线	中等	简单	中等	中等
生态系统	新提案，支持有限	广泛支持	广泛支持	广泛支持

CSS自定义属性 (Variables): 简单易用，但缺乏组织性，难以管理大型项目的主题变量。
CSS预处理器 (Sass/Less): 功能强大，但只能在编译时确定主题，无法在运行时动态切换。
CSS-in-JS (Styled Components): 可以将CSS与JavaScript代码结合在一起，实现高度动态的主题化。但会增加项目的复杂性，并且可能影响性能。
自定义属性集 (提案): 试图在CSS原生层面提供更强大的主题化能力，兼顾了组织性、可维护性和运行时切换的灵活性。

七、现状与未来展望

需要注意的是，自定义属性集目前还只是一个提案，尚未得到所有浏览器的支持。你可以在 Chrome Canary 中启用 "Experimental Web Platform features" 来体验它。

虽然如此，自定义属性集代表着CSS主题化的一个重要方向。如果它能够得到广泛的支持，将会极大地简化我们的主题化工作，提高开发效率。

八、总结

今天我们一起探索了CSS自定义属性集这个令人兴奋的提案。它通过引入属性集的概念，为CSS主题化带来了更好的组织性、可维护性和灵活性。虽然目前还处于实验阶段，但它无疑是CSS主题化的未来发展方向。

希望今天的分享能够帮助大家更好地理解CSS主题化，并在未来的项目中应用更先进的技术。感谢大家的收听！如果大家有什么问题，欢迎提问！

发表回复 取消回复

发表回复取消回复