CSS Houdini可以改变我们编写和管理CSS的方式

CSS Houdini 可能是 CSS 领域最令人兴奋的进展。Houdini 由多个独立的 API 组成，每个 API 都单独交付给浏览器，有些 API 已经交付（浏览器支持情况见此）。Paint API 就是其中之一。我对它非常感兴趣，最近开始思考如何在工作中使用它。

我能够做到这一点的一种方法是将其用作避免重复造轮子的方法。在本文中，我们将讨论这一点，同时将其与我们目前在 JavaScript 和 CSS 中使用的方法进行比较。（我不会深入探讨如何编写 CSS Houdini，因为已经有许多优秀的文章对此进行了介绍，例如这篇、这篇和这篇。）

Houdini 为 CSS 带来了模块化和可配置性

CSS Houdini 的工作方式带来了两大优势：模块化和可配置性。这两种方法通常可以使我们作为开发人员的生活更轻松。我们在 JavaScript 世界中经常看到这些概念，但在 CSS 世界中却很少……直到现在。

下表列出了一些用例的工作流程，比较了传统的 CSS 与使用 Houdini 的情况。我还添加了 JavaScript 以进行进一步比较。您可以看到 CSS Houdini 允许我们更有效地使用 CSS，类似于 JavaScript 世界如何发展成组件。

	传统 CSS	CSS Houdini	JavaScript
当我们需要常用代码片段时	从头编写或从其他地方复制粘贴。	导入一个 worklet。	导入一个 JS 库。
根据用例自定义代码片段	手动调整 CSS 中的值。	编辑 worklet 公开的自定义属性。	编辑库提供的配置。
代码共享	共享原始样式的代码，并附带有关如何调整每个部分的注释。	共享 worklet（将来，共享到包管理服务）并记录自定义属性。	将库共享到包管理服务（如 npm）并记录如何使用和配置它。

模块化

使用 Houdini，您可以导入一个 worklet 并使用一行代码开始使用它。

<code>CSS.paintWorklet.addModule('my-useful-paint-worklet.js');</code>

这意味着无需每次都实现常用样式。您可以拥有自己的一组 worklet，这些 worklet 可用于您的任何项目，甚至可以彼此共享。

如果您除了样式之外，还希望为 HTML 和 JavaScript 提供模块化，那么 Web Components 是解决方案。

这与我们在 JavaScript 世界中已经拥有的非常相似。大多数人不会重新实现常用函数，例如节流或深度复制对象。我们只需导入库，例如 Lodash。

如果 CSS Houdini 的普及程度提高，我可以想象我们会拥有 CSS Houdini 包管理服务，任何人都可以导入用于有趣的瀑布布局、背景图案、复杂动画等的 worklet。

可配置性

Houdini 与 CSS 变量配合良好，这在很大程度上增强了自身能力。使用 CSS 变量，用户可以配置 Houdini worklet。

<code>.my-element {
  background-image: paint(triangle);
  --direction: top;
  --size: 20px;
}</code>

在此代码片段中，--direction 和 --size 是 CSS 变量，它们在三角形 worklet（由三角形 worklet 的作者定义）中使用。用户可以更改属性以更新其显示方式，甚至可以在 JavaScript 中动态更新 CSS 变量。

如果我们再次将其与我们在 JavaScript 中已经拥有的内容进行比较，JavaScript 库通常具有可以传递的选项。例如，我们可以为速度、方向、大小等传递值给轮播库，以使其按我们想要的方式执行。在 CSS 中的元素级别提供这些 API 非常有用。

Houdini 工作流程使我的开发过程更高效

让我们来看一个完整的示例，说明整个过程如何协同工作以简化开发。我们将使用工具提示设计模式作为示例。我发现自己在不同的网站上经常使用这种模式，但不知何故，每个新项目都要重新实现。

让我们简要回顾一下我之前的经验：

1. 好吧，我需要一个工具提示。
2. 它是一个框，一侧有一个三角形。我将使用伪元素来绘制三角形。
3. 我可以使用透明边框技巧来绘制三角形。
4. 这时，我很有可能挖掘我过去的项目来复制代码。让我想想……这个需要向上指，哪边是透明的？
5. 哦，设计需要工具提示的边框。我必须使用另一个伪元素并为指向的三角形伪造一个边框。
6. 什么？他们决定更改三角形的指向方向？！好吧，好吧。我将调整两个三角形的全部值……

这并不难。整个过程可能只需要五分钟。但是让我们看看使用 Houdini 如何做得更好。

我构建了一个简单的 worklet 来绘制工具提示，并提供了许多选项来更改其外观。您可以在 GitHub 上下载它。

感谢 Houdini，这是我的新流程：

1. 好吧，我需要一个工具提示。
2. 我将导入此工具提示 worklet 并使用它。
3. 现在我将使用自定义属性对其进行修改。

<code></code>

这是一个提示 ``` CSS.paintWorklet.addModule('my-tooltip-worklet.js') .tooltip-1 { background-image: paint(tooltip); padding: calc(var(--triangle-size) * 1px .5em) 1em 1em; --round-radius: 0; --background-color: #4d7990; --triangle-size: 20; --position: 20; --direction: top; --border-color: #333; --border-width: 2; color: #fff; }

<code>

这是一个演示！继续尝试使用变量！

CSS Houdini 打开了模块化、可配置样式共享的大门。我期待看到开发人员使用和共享 CSS Houdini worklet。我正在尝试添加更多有用的 Houdini 使用示例。如果您有任何想法或想为此存储库贡献代码，请与我联系。</code>

以上是CSS Houdini可以改变我们编写和管理CSS的方式的详细内容。更多信息请关注PHP中文网其他相关文章！