Bricks 最被低估的能力是全局设置：颜色、字体、排版、间距、圆角都能做成变量，元素只引用变量。做到这一点，改配色从「两百个地方」变成「一个地方」。
四类设置各自的位置
| 内容 | 写在哪 | 为什么 |
|---|---|---|
| 颜色、间距、圆角、尺寸 | Global → Colors / Spacings / Sizes | 输出为 CSS 自定义属性，全站可引用 |
| 正文与标题的字族、字号、行高 | Global → Typography | 元素里只写例外，不重复声明 |
| 组件级复用样式（卡片、按钮） | Class styles（类样式） | 一处改，所有挂该类的元素跟随 |
| 重置、第三方覆盖、媒体查询里的杂项 | Settings → Root CSS 或代码编辑器 | 最低层，优先级最弱，适合打底 |
命名：给角色，不给颜色
把变量命名为 Brand、Surface、Surface Alt、Text、Text Muted、Rule、Accent，而不是 Blue、Light Gray。理由很实际：换成另一套配色时，名字仍然成立；而 Light Gray 变成深灰的那天，全站搜索替换会把你逼疯。本站的做法是把壳宽、正文宽、卡片圆角、按钮圆角、强调色全部做成 –wug-* 变量，组件样式里只引用它们。
类样式（Class Styles）用法
- 在任意元素上点 CSS Classes 旁的 New class，例如 card-primary
- 给它写样式，其它元素只需挂同一个类名
- 需要变体时加第二个类（card-primary card-compact），用叠加而不是复制
- 类样式与元素内联的区别：类样式集中、可复用；内联是一次性的，改不动第二次
不要用 id 做样式钩子。一个页面里同类元素挂五个不同 id，等于把 CSS 变成 JavaScript 的记事本。
字体：两族足够
- 标题一族、正文一族，最多两族。第三族通常是灾难的开始
- Google 字体交给 Bricks 本地托管，并勾上你实际使用的字重。拉了 6 个字重却只用 400 和 700，是白付的流量
- 中文正文建议直接走系统字体栈：中文字体子集化前动辄数 MB，会毁掉 首屏时间
- 中西混排的字体栈里，西文字体在前、中文字体在后，让中文回落到系统字体，西文用品牌字体
字号系统用一套比例（例如 13、15、16.5、20、25、32、48），别在每个元素里随手写 17px、19px。
用变量做明暗两套主题
做法只有三步，但要求你的组件样式全部走变量：
- 变量定义浅色值，另写一段深色覆盖规则（放在 Root CSS 或代码编辑器）
- 用条件切换覆盖：靠 prefers-color-scheme 自动跟随系统，或靠 data-theme 属性由用户手动选
- 把用户选择存进 localStorage，并在 head 里用一小段脚本在绘制前打属性，避免闪烁
本站就是这三步的实现：先读 localStorage 里的选择，没有则交给 prefers-color-scheme。要注意的是变量覆盖必须挂在同一个选择器层级上，否则深色模式下会漏出浅色块，常见于 Section 的背景色写成了具体值而不是变量。
顺带的对比度检查：强调色作底色时必须配深色文字。橙底白字在很多情况下过不了无障碍标准，别只凭肉眼判断。
什么时候该用自定义 CSS
- 需要伪元素、复杂过渡、第三方标记覆盖：写 CSS，别绕构建器
- 只是常规属性：用面板，可维护性远高于手写
- 手写超过三十行，就该回头检查全局设置是不是缺了变量
检验标准很简单：客户说明天想把按钮圆角从 8px 改成 2px。如果你需要打开二十个页面，说明还没用变量。
接下来把模板和条件用起来，见 条件显示与动态数据。