BBC Psammead 项目代码规范与工作方式详解

前言

BBC Psammead 是一个用于构建 BBC 数字产品的组件库，它遵循严格的设计系统和开发规范。本文将深入解析该项目的代码标准和工作方式，帮助开发者更好地理解和使用这个组件库。

核心代码规范

REM 单位的使用规范

Psammead 项目中统一使用 REM (Root EM) 作为尺寸单位，这是项目中最具特色的规范之一。

REM 的优势：

• 相对于根元素(html)的固定比例关系
• 全局一致性，避免 EM 的级联问题
• 简化响应式设计实现
• 便于维护统一的视觉层次

实际应用示例：

export const GEL_SPACING = '0.5rem'; // BBC 标准间距单位

开发者须知：

1. 所有间距、尺寸都应基于 REM 单位
2. 避免混用 px、em 等其他单位
3. 使用预定义的间距常量保持一致性

视觉回归测试

ChromaticQA 深度解析

Psammead 采用 ChromaticQA 作为视觉回归测试工具，这是保障组件库视觉一致性的关键环节。

工作流程：

1. 首次运行建立基线截图
2. 后续提交自动对比变更
3. 开发者审查差异并确认/拒绝变更

技术特点：

• 多浏览器支持(Chrome, IE, Firefox)
• 独立跟踪每个故事的基线
• 分支隔离的测试环境

本地测试方法：

export CHROMATIC_APP_CODE=<your-app-code>
npx chromatic test run --build-script-name build:storybook || true

最佳实践：

• 定期审查视觉回归结果
• 对预期变更明确标记
• 保持测试环境一致性

无障碍性测试规范

无障碍性群体测试(Accessibility Swarm)

Psammead 对无障碍性有严格要求，采用群体测试方法确保组件可用性。

测试流程：

1. 新组件：完整群体测试
2. 现有组件变更：简化测试
3. 使用支持的辅助技术验证

测试要点：

• 屏幕阅读器兼容性
• 键盘导航流畅性
• 色彩对比度达标
• ARIA 属性正确性

问题处理：

• 详细记录发现的问题
• 严重问题应创建专门工单
• 修复后需重新验证

Storybook 使用指南

组件预览最佳实践

Storybook 是 Psammead 组件开发和展示的核心工具。

关键技巧：

1. 独立标签查看：避免 iframe 对辅助技术的影响

   • 在组件菜单中选择"Open canvas in new tab"

2. 本地隧道预览：未合并代码的跨设备测试

   yarn install:packages
   yarn storybook
   # 然后使用隧道工具暴露端口
   

3. 生产环境更新：合并后自动发布到 Storybook 线上版本

调试建议：

• 使用独立标签测试辅助技术
• 验证各状态下的组件表现
• 检查控制台警告/错误

版本管理与发布

Psammead 采用语义化版本控制，发布流程自动化程度高。

发布后验证：

1. 确认 npm 包版本更新

   npm show {package-name} version
   

2. 检查线上 Storybook 更新
3. 验证依赖项目的构建情况

结语

BBC Psammead 的这套代码规范和工作流程体现了大型项目对质量控制的严格要求。通过 REM 单位的统一使用、严格的视觉回归测试、全面的无障碍性验证以及规范的 Storybook 工作流程，确保了组件库的高质量和一致性。开发者在使用或贡献代码时，应当充分理解并遵循这些规范，以维护项目的整体质量。