用CSS自定义属性和尾风为主题染色

CSS自定义属性不仅提高了代码效率，还在CSS中创造了更多可能性，尤其在主题设计方面潜力巨大。Atomic Smash团队使用Tailwind CSS（一个实用程序类框架）编写样式。本文将探讨如何使用自定义属性进行主题设计，以及如何将其与Tailwind集成以最大限度地提高代码的可重用性。本文不会讲解Tailwind的入门使用——请查看官方文档——但即使您是Tailwind新手，也可能会发现一些技巧很有用。

主题概述

假设我们有一个“号召性用语”（CTA）组件，包含标题、正文和按钮。

为这种配色方案编写常规（非Tailwind）CSS如下所示：

<code>.cta {
  background-color: #742a2a; // 深红色
  color: #ffffff; // 白色
}
    
.cta__heading {
  background-color: #e53e3e; // 中等红色
  color: #742a2a;
}


.cta__button {
  background-color: #e53e3e;
}</code>

使用Tailwind，我们将在HTML中应用这些颜色作为实用程序类：

<code><div>
  <h3 id="加入我们的邮件列表">加入我们的邮件列表</h3>
  <div>
    <p>抢先了解我们的新产品</p>
    注册
  </div>
</div></code>

我故意省略了与基本配色方案无关的类，但您可以在此演示中查看完整的示例：

现在，如果我们想将不同的配色方案应用于我们的组件，我们需要覆盖原始组件的颜色值。在没有Tailwind的情况下，一种常见的方法是将主题类附加到组件本身，并在级联中重新定义颜色值。因此，对于具有“.cta--blue”（使用BEM约定）修饰符类的组件，我们将应用蓝色配色方案的CSS值：

<code>.cta--blue {
  background-color: #2a4365; // 深蓝色
}


.cta--blue .cta__heading {
  background-color: #3182ce; // 中等蓝色
  color: #2a4365;
}


.cta--blue .cta__button {
  background-color: #3182ce;
}</code>

如果我们使用Sass或其他预处理器，则可以使用变量来简化我们的工作，我们可能会嵌套.cta__heading和.cta__body选择器。它并没有使我们的代码更简洁，但通过在一个地方更新这些值，它确实使代码更易于管理。

现在，假设我们有10种不同的配色方案，就像我最近在一个项目中的经历一样。我们的代码开始变长，因为我们基本上重复了上述示例10次才能更改这些颜色值。现在想象一下，我们设计系统中的每个组件都需要10种配色方案，而且许多组件比我们简单的CTA复杂得多。也许我们的主题也需要不同的字体。突然之间，我们需要编写大量的CSS。

使用Tailwind进行主题设计

另一方面，如果我们使用Tailwind，则需要更改HTML本身中的多个类。即使我们使用JavaScript框架（如React或Vue），这也不是一项简单的任务。为了确保在生产版本中删除未使用的样式，Tailwind不鼓励使用字符串连接来创建类名（在撰写本文时）。因此，构建我们的主题可能意味着将大量逻辑添加到我们的组件中。

使用自定义属性进行主题设计

通过为我们的颜色主题使用自定义属性，我们可以大幅减少需要编写的代码量，并减轻维护负担。让我们首先看看如何在常规CSS中做到这一点。

我们将自定义属性定义为:root选择器上的变量，使其成为全局变量。（body选择器同样适用。）然后，我们可以使用这些变量在选择器中替换颜色属性值：

<code>:root {
  --primary: #742a2a; // 深红色
  --secondary: #e53e3e; // 中等红色
}


.cta {
  background-color: var(--primary);
  color: white;
}


.cta__heading {
  background-color: var(--secondary);
  color: var(--primary);
}


.cta__button {
  background-color: var(--secondary);
}</code>

这就是真正神奇的地方：现在创建每个主题的代码只需要更新这些自定义属性值。无论我们在哪里应用主题类，新值都会被继承：

<code>.th-blue {
  --primary: #2a4365; // 深蓝色
  --secondary: #3182ce; // 中等蓝色
}</code>

如果我们想要蓝色配色方案，我们可以将.th-blue类应用于组件，甚至可以在 标签上使用它来应用页面范围的主题，然后根据需要在各个组件上覆盖它。与组件特定类（例如原始代码中的.cta--blue）相比，使用实用程序类可能会节省我们更多的代码编写工作，因为它可以应用于我们代码库中的任何位置。

处理旧版浏览器

与许多代理机构一样，Atomic Smash的许多客户仍然需要我们支持Internet Explorer 11。虽然在大多数情况下我都可以接受渐进增强方法（例如，为不支持CSS Grid的浏览器提供更简单的回退布局），但我发现主题设计是一个通常不允许轻松妥协的领域。客户希望看到他们的品牌颜色和字体，即使是在旧版浏览器上也是如此。使用特性查询提供回退将需要大量额外的工作，这将抵消使用自定义属性的好处。为了克服这个问题，我们需要一个polyfill。

有几个选项可以在IE 11中为自定义属性提供polyfill。

postcss-custom-properties

第一个是使用名为postcss-custom-properties的PostCSS插件。如果您已经在工作流程中使用PostCSS，则添加此插件相当简单。它的工作原理是处理您的CSS并输出变量的结果作为属性值。因此，如果您有以下CSS：

<code>:root {
  --color: red;
}


h1 {
  color: var(--color);
}</code>

处理后的结果将是：

<code>h1 {
  color: red;
  color: var(--color);
}</code>

不支持自定义属性的浏览器将忽略第二个规则，并回退到常规属性值。还有一个选项是从输出中删除具有自定义属性的规则，因此文件大小会更小。这意味着没有浏览器会获得自定义属性——如果您动态更新变量，这是一个问题——但是您可以将它们用于代码中的静态值而不会产生不良影响。

不幸的是，这个polyfill有一些限制：

1. 您需要在配置中指定定义自定义属性的文件（或文件）。
2. 自定义属性只能在:root选择器上定义。

第一个限制相对微不足道，但第二个限制不幸地使这个polyfill完全无法用于我们的主题设计用例。这意味着我们无法在选择器上重新定义变量来创建我们的主题。

ie11CustomProperties

此polyfill选项涉及提供客户端脚本，而不是预处理CSS。我们可以将以下脚本添加到我们的head中，以确保polyfill只在IE 11中加载：

<code>window.MSInputMethodContext && document.documentMode && document.write('');</code>

这允许我们像此处示例中一样充分利用自定义属性的优势，因此这是我决定使用的解决方案。它有一个限制，即在style属性中设置的自定义属性不会被polyfill。但我已经针对上面的主题设计示例对其进行了测试，并且它运行良好。

但这与Tailwind有什么关系？

正如我们已经看到的，实用程序类——可以在HTML中的任何位置应用的单用途类——可以使我们的代码更易于重用。这是Tailwind和其他实用程序类框架的主要卖点——您交付的CSS文件大小最终会因此变小。Tailwind提供了多个颜色类：.bg-red-medium将为我们提供红色background-color属性值，.text-red-medium用于color，依此类推，对于border、box-shadow或您可以想到的任何可能需要颜色值的地方。

颜色可以在配置文件中定义：

<code>module.exports = {
  theme: {
    colors: {
      red: {
        medium: '#e53e3e',
        dark: '#742a2a'
      },
      blue: {
        medium: '#3182ce',
        dark: '#2a4365'
      }
    }
  }
}</code>

如果我们想为我们的Tailwind类使用自定义属性值，我们可以在配置中指定它们：

<code>module.exports = {
  theme: {
    colors: {
      'th-primary': 'var(--primary)',
      'th-secondary': 'var(--secondary)'
    }
  }
}</code>

我在主题相关的类名前加上了th-前缀，以便很明显它们与主题设计特别相关，但您可以随意使用任何适合您的约定。

现在，我们可以通过Tailwind使用这些类。使用.bg-th-primary相当于编写：

<code>.some-element {
  background-color: var(--primary);
}</code>

在我们的CSS中，我们可以像以前一样定义主题的自定义属性：

<code>:root {
  --primary: #742a2a;
  --secondary: #742a2a;
}


.th-blue {
  --primary: #2a4365;
  --secondary: #3182ce;
}</code>

让我们将这些类应用于我们的HTML。第一个示例为我们提供了一个具有默认主题（在:root上定义的变量）的组件。第二个具有我们的蓝色主题。唯一的区别是在组件上添加了.th-blue类。（为了简洁和清晰，我又省略了与主题无关的类。）

<code><div class="bg-th-primary text-white">
  <h3 id="加入我们的邮件列表">加入我们的邮件列表</h3>
  <div>
    <p>抢先了解我们的新产品</p>
    <button class="bg-th-secondary">注册</button>
  </div>
</div>


<div class="th-blue bg-th-primary text-white">
  <h3 id="加入我们的邮件列表">加入我们的邮件列表</h3>
  <div>
    <p>抢先了解我们的新产品</p>
    <button class="bg-th-secondary">注册</button>
  </div>
</div></code>

使用配置作为样式指南

Tailwind鼓励您在配置中定义所有变量，就我个人而言，我同意这是一种更好的方法。这意味着配置文件可以成为单一事实来源，而不是（可能）最终有多个地方来定义颜色和其他主题值。幸运的是，我们也可以将Tailwind配置文件中的值用于我们的自定义属性。我们需要首先在配置中定义所有颜色（假设我们不使用Tailwind包含的默认调色板）：

<code>module.exports = {
  theme: {
    colors: {
      red: {
        medium: '#e53e3e',
        dark: '#742a2a'
      },
      blue: {
        medium: '#3182ce',
        dark: '#2a4365'
      },
      'th-primary': 'var(--primary)',
      'th-secondary': 'var(--secondary)'
    }
  }
}</code>

然后，我们可以访问CSS中的theme对象：

<code>:root {
  --primary: theme('colors.red.dark');
  --secondary: theme('colors.red.medium');
}


.th-blue {
  --primary: theme('colors.blue.dark');
  --secondary: theme('colors.blue.medium');
}</code>

总结

我非常高兴能够使用自定义属性而无需担心浏览器支持，更高兴能够将其与我们现有的工作流程无缝集成。很难夸大它们在主题设计方面将为我们节省的时间。我希望即使您不是Tailwind用户，本文也可能会鼓励您为此用例尝试自定义属性。

以上是用CSS自定义属性和尾风为主题染色的详细内容。更多信息请关注PHP中文网其他相关文章！