CSS 样式系统

目的与范围

本文档提供了 Semantic UI 的 CSS 样式系统的全面概述。它涵盖了样式组件的核心架构、CSS/LESS 文件的组织、主题机制以及框架中的样式定义和应用方式。有关自定义主题的详细信息，请参阅主题系统。

概述

Semantic UI 的 CSS 样式系统是使用 LESS 构建的，LESS 是一种 CSS 预处理器，支持变量、混合（mixins）和层级样式等强大功能。该系统旨在实现模块化、一致性，并通过一个全面的变量系统轻松进行自定义。

来源

组件类型层级

Semantic UI 将其组件组织成一个清晰的层级结构，有助于在整个样式系统中保持一致性和模块化。

组件层级包括

Elements（元素）：可以独立存在的构建块（按钮、标签、输入框）
Collections（集合）：构成一个内聚单元的元素组（菜单、表单、消息）
Modules（模块）：具有交互式 JavaScript 功能的 UI 组件（下拉菜单、模态框）
Views（视图）：以特定模式呈现数据的内容显示格式（卡片、项目）

来源

文件组织

Semantic UI 以结构化的模式组织其样式文件，以支持其组件层级和主题系统。

主要文件和目录是

src/definitions/：包含所有 UI 组件的核心 LESS 文件，按类型组织
- elements/（元素）：按钮、标签、输入框等。
- collections/（集合）：菜单、表单、消息等。
- modules/（模块）：下拉菜单、模态框等。
- views/（视图）：卡片、项目等。
src/themes/：包含主题变量和覆盖
- default/：默认主题设置
  - globals/site.variables：跨组件使用的全局变量
  - elements/button.variables：组件特定的变量
  - elements/button.overrides：组件的其他 CSS 覆盖

每个组件在 definitions 目录中都有一个主要的 .less 文件来定义其样式，并在 themes 目录中有一个对应的 .variables 文件，其中包含可自定义的变量。

来源

LESS 变量系统

样式系统严重依赖于强大的变量系统，该系统支持轻松的主题化和一致性。

变量以层级方式定义

全局变量（site.variables）：定义所有组件使用的基础值
- 排版设置
- 颜色调色板
- 尺寸比例
- 间距和边框
- 状态定义
组件变量（button.variables、menu.variables 等）：组件特定的设置，可能会覆盖或扩展全局变量
变量用法：组件在其 LESS 文件中引用这些变量，以在整个框架中保持一致性

来自 site.variables 的全局变量示例

@primaryColor: @blue;
@secondaryColor: @black;
@fontSize: 14px;
@emSize: 14px;
@borderRadius: @defaultBorderRadius;

每个组件文件都通过以下方式导入其变量定义

来源

组件结构

Semantic UI 的 UI 组件在 HTML 和 CSS 类结构方面遵循一致的模式。

基础组件模式

大多数组件遵循此基本模式

.ui.[component] {
    /* Base styling */
}

.ui.[component].[variation] {
    /* Variation styling */
}

.ui.[component].[state] {
    /* State styling (hover, active, etc.) */
}

例如，按钮定义为

状态和变体

组件支持多种状态和变体

状态/变体	CSS 类	目的
状态
悬停	`.ui.button:hover`	鼠标悬停样式
激活	`.ui.active.button`	选中/激活样式
重点	`.ui.button:focus`	键盘焦点样式
已禁用	`.ui.disabled.button`	禁用状态样式

变体
主要	`.ui.primary.button`	主操作按钮
次要	`.ui.secondary.button`	次要操作按钮
正例	`.ui.positive.button`	成功操作
否定	`.ui.negative.button`	破坏性操作
尺寸	`.ui.mini.button` 至 `.ui.massive.button`	尺寸变化
流体	`.ui.fluid.button`	全宽按钮

来源

CSS 复用模式

Semantic UI 使用几种模式来创建跨组件的一致样式

继承和组合

组件通常继承自更基础组件的样式，或组合多个组件。

用于保持一致性的变量

变量可确保组件之间样式的一致性

状态处理

在组件之间应用一致的状态样式

来源

响应式设计

CSS 系统包含响应式设计功能，以使组件适应不同的屏幕尺寸。

断点

断点被定义为变量

媒体查询

组件使用这些断点和媒体查询

响应式变体

许多组件都有响应式变体

.ui.stackable.grid：在移动设备上堆叠
.ui.responsive.table：适应更小的屏幕
.ui.fluid.image：在所有屏幕上全宽显示

来源

结论

Semantic UI 的 CSS 样式系统提供了一种强大、模块化的方法来样式化 Web 应用程序。通过其精心组织的组件层级、广泛的变量系统和一致的模式，它使开发人员能够轻松创建内聚、可主题化的用户界面。

该系统的优势在于其结构和灵活性的平衡，既允许通过默认样式进行快速开发，也允许通过变量覆盖和主题调整进行深度定制。