Klein's-blue的博客

记录生活，分享技术

0%

变量与复用

CSS 变量与复用（2025-2026 主流实用版）

重点：CSS 自定义属性（变量）、作用域与继承规则、现代复用策略
目标：写出可维护、可读、可扩展的样式代码

1. CSS 自定义属性（CSS Variables / Custom Properties）

1.1 基本语法与声明位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 全局变量（最常用） - 通常放在 :root */
:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 局部变量（组件内部） */
.card {
  --card-bg: white;
  --card-shadow: var(--shadow-sm);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

/* 使用方式 */
.btn {
  background: var(--primary);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
}

.btn:hover {
  background: var(--primary-dark);
}

1.2 作用域与继承规则（非常重要）

声明位置 作用范围 是否会被子元素继承 典型使用场景
:root 全局（整个文档） 是 品牌色、间距系统、字体栈、过渡曲线
某个元素 该元素及其所有后代 是 组件内部主题、局部调色板
.dark 类 .dark 及其后代 是 暗色模式主题切换
媒体查询内 符合条件的范围 是 响应式变量（字号、间距等）

继承与覆盖规则总结：

1
2
3
4
5
6
/* 层级越高（越具体）优先级越高 */
:root { --color: blue; }

.component { --color: green; }          /* 覆盖全局 */

.component.special { --color: red; }    /* 更具体 → 最终生效 */

1.3 常用技巧与现代用法（2025-2026）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 1. 暗色模式优雅切换 */
:root {
  --bg: #ffffff;
  --text: #0f172a;
  --card: #f8fafc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #e2e8f0;
    --card: #1e293b;
  }
}

/* 2. 使用 calc() + 变量（弹性布局神器） */
:root {
  --spacing-unit: 1rem;
  --gutter: calc(var(--spacing-unit) * 1.5);
}

/* 3. 字体流体排版（fluid typography） */
:root {
  --font-size-base: clamp(1rem, 2.5vw + 0.5rem, 1.25rem);
}

/* 4. 变量作为 fallback（兼容性处理） */
color: var(--brand-color, #6366f1);     /* 没有定义就用 #6366f1 */

2. 现代 CSS 复用策略对比

方案 维护性 体积 学习曲线 组件化友好度 2025-2026 使用占比估计 推荐场景
纯 CSS 变量 + 语义类 ★★★★☆ 小 低 ★★★★☆ 30~40% 中小型项目、中后台、追求原生
Tailwind CSS（原子类） ★★★★★ 中~大 中 ★★★★★ 45~60%（持续上升） 快速开发、设计系统、组件化项目首选
BEM（传统） ★★★☆☆ 小 中 ★★★☆☆ 15~25%（下降中） 老项目、严格命名规范团队
CSS Modules ★★★★☆ 小 中 ★★★★★ 10~20% React/Vue 项目，严格隔离
Utility-First + CSS变量 ★★★★★ 中 中 ★★★★★ 快速增长 现代折中方案（Tailwind + 设计令牌）
Sass/Less 预处理器 ★★★☆☆ 小 中高 ★★★★☆ 逐渐减少 老项目、需要复杂嵌套/混入的场景