在 Bricks 里用 CSS 变量搭建可维护的设计体系

为什么需要设计体系

想象一个场景：网站做好了，客户想了想说，“这个按钮颜色再鲜艳点、卡片圆角再大点、主色从 #88ED14 换成 #1FC600”。

这绝对不是幻想，而是 99% 会出现的情况。你把按钮 1 改了，发现还有按钮 2、按钮 3；把这一页卡片的圆角从 5px 改成 15px，发现还有 30 个页面也有卡片，得一个个去翻。改完 5 天，客户又说“还是之前的好看”。

问题的根源往往不是工具选错，而是一开始的工作流没搭好设计体系。如果从项目第一天就用变量管理设计令牌（design tokens），上面那些“改一处”的需求，几乎能瞬间完成。

不方便维护的反面案例

举个真实例子：三个卡片的 border-radius 各自写死。把卡片一改成 0 之后，卡片二、卡片三还是 8px。这意味着你每次想统一风格，都得挨个找到每个卡片去改——纯体力活。

而如果用变量驱动，所有卡片的圆角都引用同一个 --card-radius，你只改一行，全站卡片同步变。

在 Bricks 里落地：全局 CSS 变量

Bricks 的「设置 → 自定义代码 → 全局 CSS」是落地设计体系的最佳位置。在这里定义 :root 变量，全站任意页面都能调用：

:root {
  --primary-color:  #ff5733; /* 全局主色，可复用 */
  --button-radius: 15px;     /* 全局按钮圆角，可复用 */
}

接着把间距、字号、阴影也变量化：

:root {
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --font-base: 16px;
  --shadow-card: 0 2px 8px rgba(0,0,0,.08);
}

这样你的“设计语言”就集中在一个地方。

把变量接进 Bricks 元素

在 Bricks 编辑器里，任何支持自定义 CSS 的元素，都可以直接用 var(--xxx) 引用：

.my-card {
  border-radius: var(--button-radius);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  background: var(--primary-color);
}

进阶一点，还可以用 calc() 做派生值，比如按钮 hover 时让主色加深：

.my-btn:hover {
  background: color-mix(in srgb, var(--primary-color) 85%, black);
}

提示：color-mix() 现代浏览器已广泛支持，用它做“主色的深浅变体”比手写 hex 更稳，改主色时所有派生色自动跟随。

一套变量管全站的好处

1. 改色一键全站生效：主色、圆角、间距全在 :root，调品牌色不再翻页。
2. 风格统一：杜绝“这个卡片 8px、那个 12px”的随机值。
3. 交付更专业：客户提“圆角再大点”，你改一行 --button-radius 就交差，显得极其可控。
4. 容易交接：接手的人一看 :root 就知道整套设计语言，不用猜每个 magic number 的含义。

小结

设计体系不是大厂的专利。用 Bricks 的全局 CSS + :root 变量，小到个人站、大到企业站都能获得“改一处、全站变”的维护效率。前期多花 20 分钟定义变量，后期能省下 5 天改样式的苦力活。

想进一步系统化？可以把变量同步进 Bricks 的「主题样式（Theme Styles）」和全局类（Global Classes），让编辑在 UI 里就能选，而不用每次手写 CSS。

选题参考自 JonnyWP 的「搭建自己的设计体系」教程思路，代码与结构为本站重写整理。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程