CSS 数据结构

CSS 不是通用数据结构语言，但样式表会被解析为规则集合；选择器、声明、级联层和自定义属性形成浏览器用于计算样式的结构。

核心结构

结构	CSS 表达	用途
规则列表	样式规则与 At-rule	保存选择器和声明块
级联层序列	`@layer`	明确规则组的优先顺序
令牌依赖图	自定义属性和 `var()`	复用并传递设计值
布局网格	Grid tracks	建模二维空间

CSS 的独特之处

自定义属性在元素上参与级联并默认继承，因此它们不是简单的全局常量。级联层先比较层顺序，再比较层内规则的优先级。

综合示例

css

@layer tokens, layout, components;

@layer tokens {
  :root {
    --space: 1rem;
    --surface: #eef2ff;
    --accent: #4f46e5;
  }
}

@layer layout {
  .topic-tree {
    display: grid;
    gap: var(--space);
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}

@layer components {
  .node {
    padding: var(--space);
    border-inline-start: 0.3rem solid var(--accent);
    border-radius: 0.5rem;
    background: var(--surface);
    color: #1e1b4b;
  }
}

@layer tokens, layout, components;

@layer tokens {
  :root {
    --space: 1rem;
    --surface: #eef2ff;
    --accent: #4f46e5;
  }
}

@layer layout {
  .topic-tree {
    display: grid;
    gap: var(--space);
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}

@layer components {
  .node {
    padding: var(--space);
    border-inline-start: 0.3rem solid var(--accent);
    border-radius: 0.5rem;
    background: var(--surface);
    color: #1e1b4b;
  }
}

Tab 缩进 · Shift+Tab 反向缩进 · Esc 后按 Tab 离开编辑器
修改后切换到“效果”刷新预览 · Ctrl/⌘ + Enter

CSS 数据结构 ​

核心结构 ​

CSS 的独特之处 ​

综合示例 ​

CSS 数据结构

核心结构

CSS 的独特之处

综合示例