Bricks 主题样式与 Style Manager 实战：Theme Styles、变量、色彩与设计系统

Bricks 里“设计系统”由几层共同构成：Theme Styles（主题样式） 负责站点级默认值，Style Manager（样式管理器） 把这些默认值连同类、变量、色彩、排版 / 间距比例、Framework 与外部 CSS 集中到一个面板。本文合并官方两篇文档——Theme Styles 与 Style Manager——帮你建立正确的心智模型，避免把默认值、复用类与一次性样式混在一起。

Theme Styles 是什么

Theme Styles 是 Bricks 里的站点级样式默认值，用来定义页面、模板与元素的基线外观：排版、链接、颜色、上下文间距、按钮、表单、图片、布局元素、弹窗，以及其它元素默认值。

Theme Styles 不是全局类或元素样式的替代品——它是最宽泛的样式层，更具体的样式可以覆盖它。

• 用 Theme Styles 设定“适用于某个上下文的默认值”。
• 用全局类设定“可复用的样式模式”。
• 用元素 ID 样式设定“一次性的特例”。

进入方式：打开构建器，点击 Style Manager 图标，选择 Theme Styles。新建一个 Theme Style：打开 Theme Styles 选择器 → 输入名称 → 按 Enter 或点保存图标 → 选中它 → 添加条件 → 配置样式分组。

心智模型：条件 + 设置

一个 Theme Style 有两个重要部分：

• Conditions（条件）：它在哪里生效。
• Settings（设置）：它输出哪些默认值。

在每次前端请求时，Bricks 会把 Theme Style 条件与当前上下文做比对；匹配上的 Theme Style 变为“生效”。Bricks 随后从生效 Theme Style 的设置生成 CSS。构建器还会为你正在编辑的页面计算生效的 Theme Style，让 Theme Styles 面板能把生效样式与其它样式分开显示。

样式层级（Style hierarchy）

Theme Styles 是基线样式。它们在更具体的 Bricks 托管 CSS（如全局类、页面设置、模板内容、元素设置、弹窗样式）之前输出。实际结果是：

• Theme Style 设定默认值。
• 全局类样式可以覆盖匹配的 Theme Style 默认值。
• 页面设置可以覆盖匹配的 Theme Style 默认值。
• 元素 ID 样式可以覆盖匹配的 Theme Style 默认值。
• 选择器更强或输出更晚的自定义 CSS 可以覆盖 Theme Styles。

例如：

• Theme Style 把所有按钮文字设为黑色。
• 全局类 .button--primary 把按钮文字设为白色。
• 某个具体按钮的 ID 把文字设为红色。

那个具体按钮 ID 胜出，因为它更具体、且输出更晚。

条件（Conditions）与排除条件

打开 Conditions 控件组，告诉 Bricks 这个 Theme Style 用在站点哪些位置。要让它作用于整站：打开 Conditions → 点 Add Condition → 选 Entire Website。你可以设任意多个条件。

例如让一个 Theme Style 作用于两个特定着陆页和首页：给各个着陆页分别加条件，再给 Front page 加一个条件。只要任意一个“未被排除”的条件匹配当前上下文，Theme Style 就匹配。

排除条件（Exclude condition）：自 Bricks 1.3.6 起，你可以给任意 Theme Style 设排除条件——开启排除开关即可。如果排除条件命中，Bricks 在当前上下文就不使用这个 Theme Style。例如“除隐私政策页外，全站都用这个 Theme Style”。

生效主题样式解析

当多个 Theme Style 命中同一页面时，Bricks 按条件的具体程度给匹配项打分。常见具体度顺序（由宽到窄）：

• Entire Website：最宽匹配。
• Archive 或通用 archive 条件。
• Post type 条件。
• 具体的 archive、term、search、error 或子条件。
• Front page。
• 具体的 post/page ID：最常见的“最具体”匹配。

精确匹配取决于当前请求、预览上下文、archive 类型、分类法、post type、多语言翻译与自定义条件过滤器。默认情况下，Bricks 只加载最具体的那个匹配 Theme Style。

例如：Theme Style A 命中 Entire Website，B 命中 Pages，C 命中某个具体页面——在那个具体页面上，C 最具体，Bricks 默认加载 C。

加载方式（Loading Method）

在 WordPress Admin > Bricks > Settings > General > Theme Styles: Loading Method 配置加载方式。选项：

• Most specific（最具体）：默认。Bricks 只加载最具体的匹配 Theme Style。
• Load all matching theme styles（加载所有匹配的主题样式）：Bricks 加载条件命中的每一个 Theme Style。

需要“每个上下文一套完整 Theme Style”时用 Most specific；想叠加多个 Theme Style 时用 Load all matching theme styles——例如：全站一套排版 Theme Style、文章一套博客 Theme Style、少量页面一套着陆页 Theme Style。加载所有匹配项时，Bricks 仍按条件具体度排序，若多个生效 Theme Style 设了同一属性，由正常 CSS 层叠决定结果；保持每个 Theme Style 聚焦，避免意外重叠。

样式分组（Style groups）

可用分组取决于当前 Bricks 版本、已注册元素与集成。核心分组包括：

• Conditions：Theme Style 在哪里生效。
• Stylesheet：本 Theme Style 的自定义 CSS。
• General：宽泛的站点默认值。
• Colors：默认颜色值。
• Links：链接默认值及可选的额外链接选择器。
• Contextual spacing：间距规则与默认 margin/padding 清理。
• Content：内容 margin 默认值。
• Typography：HTML 与文本默认值。
• Popup：弹窗默认值。
• Elements：受支持元素的默认值，如 Section、Container、Block、Div、Button、Heading、Image、List、Nav Menu、Post Content、Text、Video 等。

集成可以注册额外的 Theme Style 分组。若某分组不出现，相关元素或集成可能没在你站点注册。

Stylesheet 分组与自定义 CSS

Stylesheet 分组让你把自定义 CSS 作为 Theme Style 的一部分添加，这段 CSS 随该 Theme Style 一起输出。它不像生成的控件 CSS 那样“感知断点”，所以需要时请用普通 CSS 和媒体查询。把属于同一 Theme Style 上下文的 CSS 放这里；站点级、不该依赖 Theme Style 条件的代码放全局自定义 CSS。

排版、伪类、导出与导入

排版：Theme Styles 可为 HTML、正文、标题、链接及元素级排版控件设定排版默认值。多个排版控件生效时，Bricks 会排序生成的排版 CSS，让更具体的标题设置能覆盖更宽泛的标题设置。若配置了 Style Manager 比例，Style Manager 可以把 Theme Style 的 HTML 字号用作 rem 比例计算的自动值，除非被 Style Manager 设置覆盖。

伪类：Theme Styles 可为受支持的分组存储伪类设置（如 hover、focus 状态）。宽泛的默认值用伪类；属于可复用组件模式的状态用全局类；只属于单个元素的状态用元素 ID 样式。

导出：在构建器内打开 Style Manager > Theme Styles → 选中要导出的 Theme Style → 点导出图标 → 下载生成的 JSON。

导入：打开 Style Manager > Theme Styles → 点导入图标 → 选择 Theme Style 的 JSON 文件 → 上传。若你的站点已存在相同 ID 的 Theme Style，Bricks 会跳过该样式不导入；如需作为独立样式导入，先在导出前重命名或复制源 Theme Style。

主题样式与页面设置、Style Manager 的关系

页面设置作用于当前页面或模板，且在 Theme Styles 之后输出。适合页面级设置（单页导航、页面级代码、SEO / 社交值、页面专属样式）。一句话：作用于“一组页面”的默认用 Theme Styles，作用于“一个页面 / 模板”的用页面设置。

Theme Styles 只是 Style Manager 的一部分，与以下模块并列：

• Color Manager（色彩管理器）
• Global Variables Manager（全局变量管理器）
• Global Class Manager（全局类管理器）
• Style Manager 的设置与比例

Theme Styles 定义宽泛默认值；变量与调色板提供可复用的值；全局类提供可复用模式。

最佳实践

• 永远添加条件——没有条件的 Theme Style 不会生效。
• 先用一个 Entire Website 的 Theme Style 设定基线排版、链接与宽泛的元素默认值。
• 只有当某个上下文真的需要不同默认值时，才用更具体的 Theme Style。
• 除非理解层叠，否则不要在很多叠加的 Theme Style 里设同一属性。
• 属于可复用模式的组件样式，放进全局类。
• Stylesheet 分组只放“上下文相关”的 CSS，不要放无关的全局 CSS。
• 改完条件后，测试具体的页面、archive、模板与多语言版本。

故障排查

• Theme Style 不生效：检查它是否至少有一个条件、是否有排除条件命中、在 Most specific 模式下是否另有更具体的 Theme Style。
• 宽泛的 Theme Style 在某个页面“消失”：在 Most specific 模式下，当有更具体的 Theme Style 命中该页，这是预期行为；只有想叠加时才切到 Load all matching theme styles。
• 某个 Theme Style 控件不影响元素：检查该元素是否有全局类、元素 ID 样式、页面设置或自定义 CSS 覆盖了同一属性。
• 某个分组或控件缺失：Theme Style 分组依赖已注册元素与集成；元素或集成不可用时，其分组可能不显示。
• Stylesheet 分组的自定义 CSS 不响应式：Stylesheet 是纯 CSS，需要断点行为就自己加媒体查询。

Style Manager 是什么

Style Manager 是 Bricks 里管理“设计系统原语”与可复用样式工具的中枢，把主题样式、类、变量、色彩、比例（scales）与导入的 CSS 汇集到构建器内的同一个界面。它的目的是集中样式决策——你可以在一处改颜色、间距、排版与布局规则，而不必在各面板间翻找。

Style Manager 的八个标签页

Style Manager 组织为八个标签页：Theme styles、Classes、Variables、Colors、Typography、Spacing、Framework、Settings。

• Theme styles：定义 HTML 元素和 Bricks 元素的全局默认样式。典型用途：标题与正文的基础排版、默认按钮与表单样式、全局颜色与间距、响应式默认值、全局 hover / focus 状态。它基于条件，可作用于整站、特定模板或特定页面，并支持断点与伪类。
• Classes：用 Class Manager 创建可应用到任意元素的复用 CSS 类。当一个样式在多个元素间复用、且不是全局默认时用类。类可归入分类、可锁定、可按使用与状态筛选。Theme Styles 定义默认，类让元素“选用”具体行为。
• Variables：Variable Manager 定义作为设计令牌（design tokens）的 CSS 自定义属性，常用于颜色、间距值、字号、布局尺寸、可复用数值。用 var(--variable-name) 引用，改一处即更新所有引用处。变量可从 CSS 或 JSON 导入、归类、重命名。
• Colors：Color Manager 在 CSS 变量之上构建结构化的色彩系统。每个颜色都存为变量，可选：浅色 / 深色模式值、生成明暗与透明度变体、生成 utility 类。
• Typography：用 CSS 变量与 clamp() 生成流式（fluid）字阶。你只需定义基础字号、比例（scale ratio）、最小 / 最大视口宽度，Bricks 就会生成一组在移动端到桌面端平滑缩放的变量。可用 T 恤尺码、数字步进或自定义命名；手动模式可在需要精确控制时覆盖计算值。
• Spacing：用与排版相同的比例系统生成用于 margin、padding、gap 的流式间距值，保持跨页一致的布局节奏。可生成 gap-m、p-l 之类的 utility 类，但只生成你真正用到的。
• Framework：导入外部 CSS，并将其转换为 Bricks 的类与变量。它能解析类规则、从 :root 抽取变量、按意图分类、加前缀避免冲突。适合迁移 / 导入 CSS 框架、导入已有自定义 CSS；所有导入在加入前都可人工复核。
• Settings：控制排版与间距比例如何生成，以及默认使用的色彩模式。

变量、色彩、排版与间距比例

这些标签共同构成 Bricks 的“令牌体系”：

• 变量（Variables） 是底层 CSS 自定义属性，是颜色、间距、字号的可复用来源。
• 色彩（Colors） 把变量组织成带浅 / 深模式与变体的色彩系统，并可生成 utility 类。
• 排版（Typography） 与 间距（Spacing） 用同一套比例系统生成流式值，让你不用手写一堆断点也能得到一致、响应式的层级与节奏。

Framework 导入与外部 CSS

Framework 标签把外部样式“翻译”成 Bricks 能理解的类与变量：解析类规则、提取 :root 里的变量、按意图分类、加前缀避免命名冲突。对从别的 CSS 框架迁移、或导入现有自定义样式表特别有用，且导入前可逐条人工复核。

设置、预览与快捷键

Settings 标签控制排版 / 间距比例的生成方式与默认色彩模式：

• Color mode：Light（始终浅色）/ Dark（始终深色）/ Auto（跟随系统偏好）。
• Scale configuration：影响排版与间距的——rem 计算用的 HTML 字号、最小 / 最大视口宽度。

界面上，Style Manager 头部有全屏按钮，以及“按标签显示 / 隐藏画布预览”的开关。画布预览显示当前编辑的页面，随改动实时更新，响应断点切换，且可缩放。快捷键：用数字键按位置切换 Style Manager 标签；用 CMD + .（macOS）或 CTRL + .（Windows / Linux）开关 Style Manager 弹窗。

小结

Theme Styles 是 Bricks 设计系统里最底层的“默认值层”——靠条件决定作用范围、靠样式层级被更具体的全局类 / 元素 ID / 自定义 CSS 覆盖；Style Manager 则是把这些默认值与变量、色彩、排版间距比例、Framework 导入统一管理的面板。把“全站基线”交给 Theme Styles，把“可复用模式”交给全局类（参见《Bricks 全局类完全指南》），再配合弹窗与交互（见《Bricks Popup Builder 与 Interactions 实战》），就能搭出一套既统一又可维护的 Bricks 设计系统。

站长

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.

获取报价 →浏览全部教程