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 包裹所有故事。并在 Storybook 的 UI 中添加一个主题选择器，以便你可以在公司支持的主题之间切换。

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

你可能已经注意到，默认情况下每个故事的背景都是白色的。在测试暗色模式或为了更好地匹配你的调色板时，你会想要更改它。Backgrounds 插件正是为此设计的。它在 Storybook 工具栏中添加一个下拉菜单，允许你更改背景颜色。

文档化主题

在构建 UI 时，轻松访问主题可以提供良好的开发者体验。无需在多个工具之间切换，你可以在 Storybook 中直接引用主题。

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

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

布局

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

Outline 插件添加了一个工具栏按钮，可以切换所有 UI 元素的轮廓。这使得快速验证定位和放置变得容易。

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

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

可访问性

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

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

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

结论

设计 UI 需要时间、精力和细心。你必须预测无数条件，以确保布局和美观正常工作。首次考虑浏览器、设备和用户偏好的每种组合是很困难的。Storybook 插件通过在开发工作流程中提供更好的调试工具来让你的生活更轻松。

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