Storybook CSS 插件

即使对于经验丰富的开发人员来说，CSS 也可能令人沮丧。您必须协调数十个属性——考虑美观、布局、颜色、对齐、响应式行为和语言。最重要的是，还要处理浏览器怪癖和继承的样式。而目视检查是确认一切正常运行的唯一方法。

每个方面都需要手动验证。调整浏览器大小以检查所有断点。测试每个伪状态、语言环境、浏览器等等。这需要花费大量时间点击来使 UI 处于正确的状态。⏱️

本文展示了 Storybook CSS 插件，它们可以加速您的工作流程并使调试更容易。

设备和用户偏好

现代界面通过不同地渲染来响应用户上下文和偏好。它们根据设备尺寸变形。支持多种颜色模式（浅色和深色）。并响应悬停和焦点等交互。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 包裹所有 stories。并在 Storybook 的 UI 中添加一个主题选择器，以便您可以在公司支持的主题之间切换。

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

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

记录主题

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

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

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

布局

很难判断您的 CSS 布局是否与设计匹配。当 DOM 元素相距很远或具有奇形怪状时，目测对齐会很棘手。

Outline 插件 添加了一个工具栏按钮，用于切换所有 UI 元素上的轮廓。这使得一目了然地验证位置和放置变得容易。

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

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

可访问性

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

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

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

结论

样式化 UI 需要时间、精力和细心。您必须预测无数条件以确保布局和美观性起作用。第一次就考虑到浏览器、设备和用户偏好的每种组合是很棘手的。Storybook 插件通过在开发工作流程中为您提供更好的调试工具来让您的生活更轻松。

查看 插件目录 以发现更多用于样式化和 CSS 的插件。了解如何使用我们的教程和文档构建插件。并加入下方 Twitter 上的讨论。