用于 CSS 的 Storybook 插件

CSS 可能令人沮丧，即使是经验丰富的开发者也是如此。您需要协调数十种属性——考虑美观、布局、颜色、对齐、响应式行为和语言。除此之外，还要处理浏览器怪癖和继承的样式。并且只有通过视觉检查才能确认一切是否按预期工作。

每个方面都需要手动验证。调整浏览器大小以检查所有断点。测试每个伪状态、区域设置、浏览器等。这需要花费大量时间四处点击才能使 UI 进入正确状态。⏱️

本文介绍了用于 CSS 的 Storybook 插件，它们可以加快您的工作流程并简化调试。

设备和用户偏好

现代界面通过渲染方式不同来响应用户上下文和偏好。它们会根据设备大小变形。支持多种颜色模式（浅色和深色）。并响应悬停和焦点等交互。Storybook 插件可以轻松可视化这些状态。您可以专注于验证您的工作，而不是手动复制每个状态。

使用 Viewport 插件 控制视口大小和方向。您可以选择标准大小之一或配置自己的特定尺寸。

Pseudo States 插件 允许您并排渲染组件的各种 CSS 伪状态——悬停、焦点、活动等。然后，您可以对它们运行 视觉回归测试。

用户的语言偏好会极大地影响 UI。例如，德语单词比英语单词长 20-25%。阿拉伯语是从右到左书写的。通过调整每种区域设置和语言组合中的浏览器偏好来测试 UI 是一件麻烦事。使用 Toolbars 插件，只需单击一下即可切换区域设置等全局变量。

主题

主题控制 UI 特征，如调色板、排版和空白。越来越多的开发者需要构建支持多种主题的组件

• 颜色模式，如浅色、深色和高对比度
• 不同的视觉品牌。组件，尤其是设计系统中的组件，用于构建具有不同美学的众多产品。

您需要一种方法来切换主题或并排显示具有不同主题的同一组件。如何实现取决于您使用的工具。Storybook 已为您准备好。

原生 CSS

您喜欢普通的 CSS 文件吗？使用 CSS Resources 插件。您可以配置项目的所有 CSS 文件，然后在插件面板中打开或关闭它们。可以轻松加载和切换不同的主题。

CSS-in-JS

Emotion 和 styled-components 允许您在 JavaScript 中编写 CSS。它们要求您的应用程序被 Provider 包裹，该 Provider 然后将主题对象提供给树下方的组件。

styled-components 插件 和 emotion 插件 指示 Storybook 使用此 Provider 包裹所有故事。并在 Storybook 的 UI 中添加主题选择器，因此您可以切换公司支持的主题。

Theme switcher 插件 是一个更通用的选项。它可以配置为与您选择的任何库一起使用。

您可能已经注意到，每个故事的背景默认都是白色的。在测试深色模式或更好地匹配您的调色板时，您需要更改它。 Backgrounds 插件 正是做到这一点。它在 Storybook 工具栏中添加了一个下拉菜单，允许您更改背景颜色。

文档主题

在构建 UI 时，方便地访问主题可以带来良好的开发体验。您可以在 Storybook 中直接引用主题，而无需在多个工具之间切换。

Addon Docs 是文档组件用法和属性的出色工具。它还允许您使用 MDX 创建自由格式页面，可用于可视化和文档化主题。该插件提供了一系列 Doc Blocks 组件，其中包括用于调色板和排版样式的实用程序。

目前的最佳实践是使用 CSS 自定义属性来定义主题变量。 Addon CSS Props 可以轻松地记录和交互这些变量。您可以通过插件面板访问它们，甚至可以将它们添加到 Docs 页面。

布局

很难判断您的 CSS 布局是否与设计匹配。当 DOM 元素相距很远或形状奇怪时，用眼睛检查对齐方式很困难。

Outline 插件 在工具栏按钮上添加了一个按钮，用于切换所有 UI 元素的轮廓。这使得一眼就能轻松验证定位和放置。

Backgrounds 插件 还提供了显示网格的选项。如果您的设计基于一致的基线网格，这将特别有用。您可以使用 参数配置网格大小。

说起网格，CSS Grid 正在成为页面布局的首选工具。您可以使用它来创建具有间隙和模板区域的复杂布局系统。 Column Guides 插件 允许您通过显示列指南来可视化您的网格。同样，您可以使用参数来配置它。

可访问性

您在 CSS 中做出的选择可能会对您应用程序的可访问性产生负面影响。前景和背景颜色对比度差、焦点样式丢失或使用媒体查询锁定设备方向。

可以使用机器运行此类最佳实践启发式方法来检查您的 UI，以捕获可访问性违规。 Accessibility 插件 通过运行此类自动化检查，帮助您对组件的合规性进行 QA。然后，在开发过程中突出显示需要改进的区域。

该插件还允许您模拟视觉缺陷，这有助于您做出更明智的选择。例如，对于视力模糊的人来说，文字是否清晰易读？或者对于色盲的人来说，页面看起来如何？

结论

样式 UI 需要时间、精力和细心。您必须预料到无数种情况，以确保布局和美观效果良好。很难第一次就考虑到浏览器、设备和用户偏好的所有组合。Storybook 插件通过在开发工作流程中提供更好的调试工具，使您的生活更轻松。

查看 插件目录，发现更多用于样式和 CSS 的插件。通过我们的教程和文档学习如何构建插件。并在下方的 Twitter 上加入讨论。