为Canva的设计系统添加响应式设计
内容提要
Canva的设计系统Easel为他们的产品带来了一致性、可组合性和效率。他们有创建一致布局的核心原则，包括间距比例和定义的断点。他们提供布局组件，使构建具有一致性的布局更容易。他们还通过使用CSS媒体查询来解决响应式设计问题。他们使用自定义属性和级联来处理每个断点的每个选项，以实现灵活性和未来选项。Canva为他们的解决方案感到自豪，并邀请前端工程师加入他们。
延伸解读
响应式布局的API设计考量
Canva在设计响应式布局API时，有两个硬性要求：API易于理解，且对服务端渲染（SSR）友好。因此他们选择使用CSS媒体查询，而不是依赖JavaScript。API设计上，他们借鉴了Braid的“响应式props”，将spacing属性改为对象，键为断点，值为间距。这样开发者可以直观地指定不同断点下的间距，同时保持SSR兼容性。
传统媒体查询方案的扩展性问题
最初，Canva尝试为每个断点下的每个间距值生成一个类，但间距值有10个，断点有4个，这意味着需要维护40个类，且每新增一个选项或断点，类数量会成倍增加。这种方案不仅难以维护，还会导致CSS体积膨胀，影响加载性能。因此他们认识到需要更可扩展的解决方案。
自定义属性与级联的巧妙结合
Canva最终采用自定义属性（CSS变量）和级联来解决扩展性问题。他们为每个断点定义一个自定义属性（如--spacing-small-up），并通过内联样式设置这些属性。同时引入一个“伪私有”自定义属性--spacing-internal，在当前断点下将其设置为对应断点的变量，从而避免冗长的回退链。这样，每个断点只需一个类选择器，新增选项也只需添加属性，大大提升了可维护性。
设计系统体积与用户体验的权衡
Canva拥有超过1.9亿活跃用户，其中许多使用慢速设备和网络。增加设计系统的功能会增加CSS包大小，可能延长加载时间，影响用户体验。但另一方面，设计系统处理更多情况可以减少工程师编写自定义代码的需求，从而可能减小整体包大小。因此，每添加一个新功能都需要仔细权衡。
Q&A
Canva的设计系统Easel的主要目标是什么？
Easel的主要目标是提供一致性、可组合性和效率。
Canva如何处理响应式设计问题？
Canva通过使用CSS媒体查询和自定义属性来处理响应式设计问题。
Canva的设计系统中使用了哪些核心原则？
核心原则包括使用8px网格单位的间距比例和定义的断点。
增加设计系统功能可能带来什么影响？
增加功能可能导致包大小增加，从而影响用户体验。
Canva的布局组件如何简化设计过程？
布局组件提供了一致的语言，使设计师和开发者之间的沟通更简单，并简化了一致布局的构建。
Canva邀请哪些专业人士加入他们的团队？
Canva邀请前端工程师加入他们的团队，以解决具有挑战性的工程问题。
