站点规模扩大后，维护成本往往随之攀升。让重复样式指向同一源头，是降低这一成本的有效手段。CSS 类允许多个元素共享规则，修改一处，全局更新，这正是其核心优势。
Divi 5 将这套逻辑嵌入可视化构建器，构建了一套连贯的设计系统。它通过设计变量提供可复用数值，利用预设整理共享设置，并借助预设管理器实现集中维护。另外，组合设置与嵌套选项预设进一步将这种关联延伸至模块内部细节。
理解类基设计的本质
CSS 类的作用在于用共享规则控制多个元素。比如说，一个名为 .primary-button 的规则可以定义背景色、内边距和字重。所有使用该类的按钮共享这些声明，无需在每个元素上单独复制。
更新规则时，所有应用该规则的元素属性会同步变更。通过增加辅助类或响应式规则，可以在保持共同基础的同时引入差异，所以共享机制并不意味着所有元素必须外观一致。
这种方式的实际价值在于一致性与维护便捷性。新页面可直接复用既定的按钮、标题或间距样式；客户提出的修订需求只需更新共享定义，无需逐一修改众多元素。
清晰的命名与职责划分让系统更易用。比如说，一个专门负责圆角的类，可以服务于多个组件，而不会干扰其颜色或字体设置。
Divi 5：让共享设计决策可视化
在 Divi 中，用户可在构建器界面内直接创建可复用的值与样式。设计变量、选项组预设和元素预设分别处理设计体系的不同层级。
设计变量提供可复用数值
设计变量允许定义一次，然后在兼容字段中多次引用。主色变量可统一应用于按钮、链接和图标；间距变量则能在多种卡片设计中重复使用。
变量支持样式与内容两类数据：
- 颜色与字体：共享的调色板值与字体样式。
- 数值：尺寸、间距、宽度、圆角半径，支持 clamp() 等 CSS 函数。
- 图片与渐变：可复用的素材和填充，包括通过渐变编辑器创建的渐变变量。
- 文本与链接：重复出现的标签和跳转目标。
在可视化构建器侧边栏打开变量管理器选择类型，填入描述性名称和数值。如“主色”或“标题字号”这类命名，有助于明确变量用途。
在兼容字段中，通过变量选择器或动态内容选择器调用。可用选项取决于字段类型。
选项组预设共享样式处理
选项组预设将相关设置打包为可重复应用的方案。比如说，一套“紧凑卡片”预设可能包含特定的内边距、边框半径和背景色。应用预设后，整个样式组合即时生效，避免逐个字段调整。
元素预设整合设计
元素预设将多个选项组预设组合，形成完整的视觉方案。一个“营销横幅”元素预设可能同时应用背景渐变预设和标题排版预设。这种层级化结构让设计从原子值到完整组件的过渡变得清晰。
集中管理与预览
预设管理器提供统一界面，用于浏览、创建、编辑和删除所有预设与变量。用户可在此预览方案效果，并管理它们之间的依赖关系，确保设计体系的结构完整。
在模块内延伸共享样式
通过组合设置暴露更多控制项
组合设置允许开发者或用户扩展模块的默认选项。比如说，在文本模块中额外暴露行高或字间距控制，这些新增选项可被纳入预设系统。
用嵌套选项预设连接控制项
嵌套选项预设将模块内部的细粒度选项组合起来。当模块包含多个子组件（如按钮模块内的图标与标签）时，可以为每个子部分创建独立预设，实现精细化的样式控制。
结合堆叠预设生成变体
堆叠预设允许将多个预设叠加应用。比如说，先应用“基础按钮”预设，再叠加“悬停动画”预设，即可快速生成按钮的交互变体，无需重复设置。
与 CSS 类的对比
Divi 5 的预设系统模拟了 CSS 类的共享机制，但无需编写代码。变量对应 CSS 自定义属性，预设对应类选择器，管理器对应样式表。这种可视化封装降低了使用门槛，同时保留了类基设计的核心优势：单一源头、多处引用、集中维护。
构建可持续使用的设计系统
这套工具链让设计系统不再依赖外部代码文件，而是内嵌于构建器中。团队可以围绕变量与预设协作，保持视觉一致性，同时为快速迭代提供灵活基础。对于希望在不接触 CSS 的前提下实现专业级设计管理的用户，Divi 5 提供了一条务实的路径。
