主题化Zalando设计系统
Why theming?
为什么需要主题化?
As a design system evolves alongside with the brand it represents, there are often multiple occasions when a need to introduce variations arises. On the business side of things there may be use cases for part of the customer journey to have a distinct look and feel, or there may be sub-brands being part of a larger platform. The previous article on this blog gives a wider overview of the Zalando Design System. This article will focus instead on the challenges encountered in the development of theming capabilities.
随着设计系统与其代表的品牌一起发展,通常会出现多种情况需要引入变化。在业务方面,可能会有客户旅程的一部分需要具有独特的外观和感觉,或者可能有子品牌作为较大平台的一部分。本博客的上一篇文章对Zalando设计系统进行了更广泛的概述。本文将重点介绍在主题能力开发中遇到的挑战。
Introducing variations into the system, without compromising the baseline brand identity and the benefits of reusing existing client components, is one of the main reasons to explore the concept of theming.
在不损害基线品牌身份和重用现有客户端组件的优势的前提下,引入系统的变化是探索主题概念的主要原因之一。
In the absence of a proper theming architecture, early attempts and explorations of "theming" had lead to a number of hacky solutions that quickly become hard to maintain and pose risks to the overall system stability. In the past we encountered numerous challenges, including hidden CSS overrides, local conditional logic, debatable API additions, and duplicated implementations. A comprehensive theming solution quickly evolved from a "nice to have" into a clear "must have".
在没有适当的主题架构的情况下,早期的"主题化"尝试和探索导致了许多难以维护并对整个系统稳定性构成风险的解决方案。过去我们遇到了许多挑战,包括隐藏的CSS覆盖,本地条件逻辑,有争议的API添加和重复的实现。一个全面的主题解决方案迅速从"好有"发展成为明确的"必须有"。
On a very high level, a theming architecture is just another instance of the generic problem of balancing flexibility and usability. A very strict and consistent design system makes development extremely fast, but as a company evolves and business requirements start to deviate from the initially identified rules we observe an increase in development and maintenance efforts. In order to keep the system healthy, it quickly becomes a requirement to handle the newly introduced flexibility as part ...