Bricks 全局类完全指南：Global CSS Classes、Class Manager 与导入管理器

Bricks 的全局类（Global CSS Class）是搭建设计系统的最小单位：你定义一个可复用的样式集合，把它分配给一个或多个元素，之后只改类、全站跟着变。本文合并官方三篇文档——Global CSS Classes、Global Class Manager 与全局类导入管理器（Global Class Import Manager）——把从“创建类”到“跨站导入导出”的完整链路讲清楚。

什么是全局类

全局类是 Bricks 里可复用的样式目标。你可以创建一个全局类、把它分配给一个或多个元素，然后在构建器里用与普通元素相同的控件可视化地编辑它——改一处，所有用这个类的元素同步更新。

用全局类替代“复制粘贴样式”的核心价值：

• 样式只维护一份。
• 站点视觉保持一致。
• 配合 Class Manager 的分类、锁定、导入导出，可以像管理代码库一样管理样式。

心智模型：元素 ID 样式与全局类样式

每个 Bricks 元素都有唯一的元素 ID。元素面板顶部的选择器字段显示当前样式目标：

• #my-element：只作用于当前元素。
• .card：作用于名为 card 的全局类。
• .card:hover 或 .card::before：作用于类的状态 / 伪元素。

关键区别在于“当前激活的选择器”：分配了某个类 ≠ 正在编辑某个类。添加类后如果不选中它，你改的还是元素 ID 样式；选中类后，改动才写入全局类。

类样式与元素 ID 样式并存时，元素 ID 更具体，通常胜出。正确做法：可复用的默认值放类里，一次性特例放元素 ID 里；避免在元素 ID 上留下本可复用的相同属性。

如果某个类“没生效”，先检查元素 ID、页面设置或自定义 CSS 是否已设置了同一属性——它们会覆盖类样式。

在元素面板上创建全局类

1. 选中一个元素。
2. 点击显示元素 ID 的选择器输入框。
3. 输入类名（带不带前导点都可以，Bricks 存储时不带点、显示时带点，如 .card）。
4. 按 Enter 或点保存图标。
5. 选中新类使其成为激活选择器，然后修改样式控件。

一次输入多个名称（用空格或逗号分隔）时，Bricks 会创建缺失的类、复用已存在的类。

给元素分配已有全局类

选中元素 → 打开选择器 / 类下拉框 → 搜索 → 点击添加。类会出现在激活类列表里：

• 点击类徽章（chip）→ 使其成为当前激活选择器，开始编辑该类。
• 点击关闭图标 → 从该元素上移除类（不会删除全局类本身）。

给元素本身设置样式前，先“取消选中”类：点击激活选择器字段，选元素 ID 条目或清空图标，确认回到元素 ID 即可。

一个元素多个类

Bricks 支持一个元素挂多个类，这是“基础类 + 修饰类 + 工具类”模式的地基：

.button.button--primary.margin-top-l

• 基础类（.button）：结构 + 默认样式。
• 修饰类（.button--primary）：变体（颜色、尺寸等）。
• 工具类（.margin-top-l）：单属性工具。

同具体度的类按 CSS 层叠规则决定结果。Bricks 2.4 起，Settings > General > Output global class CSS in Class Manager order 让同名属性按 Class Manager 里的类顺序输出，便于预判覆盖关系。

伪类与自定义选择器

元素面板的选择器支持伪类与自定义选择器：

• 伪类：hover、focus、active 等状态，写成 .card:hover。
• 自定义选择器：子元素 / 关联元素。如果选择器以 : 开头，直接附加到类上；其它选择器则嵌套在类选择器内。

在类上定义伪类状态，能让“悬停变色”“聚焦描边”这类行为只维护一份。

复制、粘贴、重置与重命名

元素面板提供完整的样式转移能力：

• 复制 / 粘贴：从元素 ID 或某个类复制样式，粘贴到另一个元素 ID 或类。
• 重置：可单独重置元素 ID 样式或类样式。
• 重命名：重命名元素 CSS ID 或激活的类。重命名类时，Bricks 会同步更新类名与自定义 CSS 里的旧根选择器（写在 Bricks 之外的 CSS 不会自动改）。

锁定（locked）的类在解锁前不能编辑。

批量编辑：同时选中多个元素时，面板显示它们共有的类，可以跨选中元素统一添加或移除类。

全局类管理器（Class Manager）

Class Manager 是维护全局类库的中央面板，与元素面板的分工不同：元素面板负责“给选中的元素添加 / 编辑 / 移除类”，Class Manager 负责“组织整个类库”。

点击构建器工具栏的 Style Manager 图标 → Classes 标签页进入。Class Manager 可以做到：

• 不选中任何元素也能创建、重命名类。
• 把类组织进分类（Categories）。
• 批量重命名、复制（duplicate）。
• 批量锁定 / 解锁。
• 移入回收站、恢复、永久删除。
• 导出、导入类。
• 查看类的使用情况、冲突与导入记录。

可通过 Bricks > Settings > General > Disable global class manager 关闭该功能（权限也受管理员控制）。

创建与批量编辑

类列表底部有新建类输入框；选中一个或多个类后，编辑器列可以：

• 重命名：单个重命名，或批量重命名（查找替换 / 加前缀 / 加后缀）。
• 复制：单个或批量复制（同样支持查找替换 / 前缀 / 后缀）。
• 归类：分配给某个分类。
• 锁定 / 解锁。

重命名或复制时，Bricks 会检查重名并跳过冲突项；重命名后旧类根选择器在自定义 CSS 中会被更新（Bricks 之外写的 CSS 不受影响）。

分类组织类库

分类是组织层，不改变 CSS 输出。可以创建、重命名、排序分类、按分类筛选类、连同分类一起导出。没有分类的类属于“未分类”。分类的意义在于：当类库上百个类时，你能快速找到“按钮体系”“间距工具”“排版工具”各自的类。

搜索、排序与筛选

Class Manager 提供强大的筛选器，常见组合：

• 文本包含 / 排除。
• 按字母排序。
• 本站在用 / 本站未用。
• 本页在用 / 本页未用。
• 有样式 / 无样式。
• 已锁定 / 未锁定。

“本站未用”是清理类库的起点，“本页在用”则是排查页面样式来源的捷径。

锁定类

锁定类可以防止意外编辑：被锁定的类仍然可以按权限分配给元素，但不能编辑，直到解锁。对设计系统的“地基类”（如容器、按钮基础、排版类）建议锁定，配合权限控制，让团队成员只改该改的层。

回收站、恢复与永久删除

从激活列表删除类 → 进入回收站（trash）。回收站视图可以：

• 恢复：恢复到删除前的位置；若同名类已存在，可能自动重命名。
• 永久删除：从回收站彻底清除。

注意：移入回收站 ≠ 从元素上移除。删除类后，仍引用它的元素会丢失该类样式，所以删除前先确认使用情况。

导出与导入类

• 导出：点导出按钮导出全部类；或先选中若干类再点“导出选中”图标。导出的 JSON 包含分类元数据。
• 导入：在导入弹窗里拖入 JSON 文件。

导入时 Bricks 会按类 ID 和类名检查冲突，并在导入前让你处理冲突（见下一节）。

导入冲突与全局类导入管理器

全局类导入管理器（Bricks 1.12 引入）解决了旧版“冲突类一律自动丢弃、导入前无法整理”的痛点：它在你导入全局类时给出一个清晰的界面，让你先解决冲突、归类、再干净地完成导入。

什么时候弹出：每当全局类被导入构建器时——包括导入全局类 JSON 文件、粘贴元素、导入模板。按设置不同，它可能针对新类、冲突类、或两者都弹。

• 新类（New classes）：当前站点不存在的类，可以先归类再导入。
• 冲突类（Conflicting classes）：与本地类同名或同内部 ID 但设置不同的类，标红显示，必须先解决才能完成导入：
  • 覆盖本地类（Override local class）：用导入版本替换本地版本。
  • 丢弃冲突类（Discard conflicting class）：跳过，保留本地版本。

什么时候弹出（WordPress Admin > Bricks Settings > Builder > Global class import manager）：

在弹出界面里，你可以接受 / 拒绝 / 重命名 / 复制 / 归类 / 锁定冲突类，也可以把冲突标记为“覆盖本地”。

模板与粘贴导入

模板、远程模板、复制的元素、转换的布局在粘贴或导入时都会携带全局类。Bricks 会尽量保持引用有效：能映射的映射，不能的走导入审查流程。批量搭建站点时，这比手动重建类库高效得多——前提是导入前在导入管理器里过一遍冲突。

生成的 CSS 生命周期

Bricks 不会在每页输出所有全局类：只为当前渲染上下文里被元素使用的类生成 CSS（按元素类型分组输出）。这保证了性能，也解释了“为什么某个类没在页面 CSS 里出现”——它没有被任何元素引用。

Bricks 2.4 的 Output global class CSS in Class Manager order 只影响同具体度属性的覆盖顺序，并不会让未使用的类也输出 CSS。

保存时的冲突检测

多人协作时，如果启用了同步 / 冲突检查，保存时 Bricks 会检测到其它用户对类的改动，并报告：新增、修改、删除，以及真正的冲突。团队协作时建议保持该功能开启，避免互相覆盖。

最佳实践

• 类名清晰、描述用途（如 .button--primary、.section-padding），不要用 class1、red-text 这类难以维护的名字。
• 地基类创建后尽快锁定。
• 用分类组织类库，别让类堆积在“未分类”。
• 删除类前先看使用情况（“本站在用”筛选），不要因为当前页面没看到就删。
• 导入前在导入管理器里逐条审查冲突与映射。
• 工具类保持单一职责、体积小。
• 避免多个类设置同一属性互相打架；需要控制覆盖顺序时用 Class Manager 顺序设置。

常见问题排查

• 类没生效：检查元素是否真的分配了该类、类是否有样式、是否被元素 ID / 页面设置 / 自定义 CSS 覆盖。
• 无法编辑类：类被锁定、权限不足，或 Class Manager 被管理员禁用。
• 恢复后名字变了：同名类已存在，Bricks 自动重命名以避免冲突。
• 导入的内容看起来不一样：检查冲突解决方式（接受 / 映射 / 拒绝），并确认主题样式、变量与调色板等依赖项是否一起导入。

小结

全局类是 Bricks 设计系统的核心单元：元素面板负责“用”，Class Manager 负责“管”，导入管理器负责“搬”。把默认值交给 Theme Styles（见《Bricks 主题样式与 Style Manager 实战》）、把可复用模式交给全局类、把一次性特例交给元素 ID，是 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.

获取报价 →浏览全部教程