CSS变量完全指南：打造可维护的样式系统

CSS变量完全指南：打造可维护的样式系统

引言

CSS变量（也称为自定义属性）是CSS3引入的强大功能，它允许我们定义可复用的值，提高样式代码的可维护性和灵活性。本文将深入探讨CSS变量的核心概念、使用方法和最佳实践。

一、CSS变量基础

1.1 定义变量

:root { --primary-color: #4CAF50; --secondary-color: #FF5722; --text-color: #333; --font-size: 16px; }

1.2 使用变量

.element { color: var(--text-color); font-size: var(--font-size); background-color: var(--primary-color); }

1.3 变量的作用域

:root { --global-color: blue; } .container { --local-color: red; } .element { color: var(--local-color); }

二、CSS变量的高级用法

2.1 变量的级联

:root { --primary: #4CAF50; --primary-light: var(--primary); } .container { --primary-light: #8BC34A; } .element { color: var(--primary-light); }

2.2 变量的计算

:root { --base-size: 16px; --spacing: calc(var(--base-size) * 2); } .element { padding: var(--spacing); font-size: calc(var(--base-size) * 1.5); }

2.3 变量的默认值

.element { color: var(--text-color, #333); font-size: var(--font-size, 16px); }

2.4 变量的继承

.parent { --color: blue; } .child { color: var(--color); }

三、CSS变量与主题

3.1 创建主题系统

:root { --primary: #4CAF50; --secondary: #FF5722; --background: #ffffff; --text: #333333; --success: #4CAF50; --warning: #ff9800; --error: #f44336; } [data-theme="dark"] { --primary: #8BC34A; --secondary: #FF7043; --background: #1a1a1a; --text: #ffffff; --success: #8BC34A; --warning: #ffc107; --error: #e57373; }

3.2 应用主题

body { background-color: var(--background); color: var(--text); } .button-primary { background-color: var(--primary); color: white; } .button-secondary { background-color: var(--secondary); color: white; }

3.3 动态切换主题

const toggleTheme = () => { const root = document.documentElement; const currentTheme = root.getAttribute('data-theme'); const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; root.setAttribute('data-theme', newTheme); };

四、CSS变量与响应式设计

4.1 响应式变量

:root { --container-width: 90%; --font-size: 16px; --spacing: 1rem; } @media (min-width: 768px) { :root { --container-width: 80%; --font-size: 18px; --spacing: 1.5rem; } } @media (min-width: 1024px) { :root { --container-width: 70%; --font-size: 20px; --spacing: 2rem; } } .container { width: var(--container-width); font-size: var(--font-size); padding: var(--spacing); }

4.2 基于视口的变量

:root { --viewport-width: 100vw; --viewport-height: 100vh; } .full-screen { width: var(--viewport-width); height: var(--viewport-height); }

五、CSS变量与动画

5.1 变量动画

@keyframes pulse { 0% { --opacity: 1; } 50% { --opacity: 0.5; } 100% { --opacity: 1; } } .element { animation: pulse 2s ease-in-out infinite; opacity: var(--opacity, 1); }

5.2 动态变量值

.button { --hover-scale: 1; transition: transform 0.2s ease-out; } .button:hover { --hover-scale: 1.05; transform: scale(var(--hover-scale)); }

六、CSS变量与组件设计

6.1 组件级变量

.card { --card-bg: white; --card-border: #eee; --card-shadow: 0 2px 8px rgba(0,0,0,0.1); background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } .card.dark { --card-bg: #333; --card-border: #444; --card-shadow: 0 2px 8px rgba(0,0,0,0.3); }

6.2 按钮组件变量

.button { --btn-primary: #4CAF50; --btn-primary-hover: #45a049; --btn-secondary: #607D8B; --btn-secondary-hover: #546E7A; --btn-danger: #f44336; --btn-danger-hover: #da190b; } .btn-primary { background: var(--btn-primary); } .btn-primary:hover { background: var(--btn-primary-hover); }

七、CSS变量与CSS Grid/Flexbox

7.1 动态网格

:root { --grid-columns: 1; --grid-gap: 1rem; } @media (min-width: 600px) { :root { --grid-columns: 2; } } @media (min-width: 900px) { :root { --grid-columns: 3; } } .grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: var(--grid-gap); }

7.2 动态flex属性

.container { --flex-direction: column; --justify-content: center; display: flex; flex-direction: var(--flex-direction); justify-content: var(--justify-content); } @media (min-width: 768px) { .container { --flex-direction: row; --justify-content: space-between; } }

八、CSS变量的JavaScript交互

8.1 读取变量

const root = document.documentElement; const primaryColor = getComputedStyle(root).getPropertyValue('--primary');

8.2 设置变量

const root = document.documentElement; root.style.setProperty('--primary', '#FF5722');

8.3 动态主题切换

const themes = { light: { '--primary': '#4CAF50', '--background': '#ffffff', '--text': '#333333' }, dark: { '--primary': '#8BC34A', '--background': '#1a1a1a', '--text': '#ffffff' } }; const applyTheme = (themeName) => { const root = document.documentElement; const theme = themes[themeName]; Object.entries(theme).forEach(([key, value]) => { root.style.setProperty(key, value); }); };

九、CSS变量最佳实践

9.1 组织变量

:root { /* 颜色系统 */ --color-primary: #4CAF50; --color-primary-light: #8BC34A; --color-primary-dark: #388E3C; /* 字体系统 */ --font-family: 'Roboto', sans-serif; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 18px; --font-size-xl: 24px; /* 间距系统 */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; /* 圆角 */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); }

9.2 使用命名约定

/* 推荐 */ --color-primary --font-size-base --spacing-md /* 不推荐 */ --primary --size1 --space

9.3 变量的回退机制

.element { color: var(--text-color, #333); font-size: var(--font-size, 16px); }

9.4 避免过度使用变量

/* 不好：每个值都用变量 */ :root { --margin-top-10: 10px; --margin-top-20: 20px; } /* 好：使用计算 */ :root { --spacing-unit: 10px; } .element { margin-top: calc(var(--spacing-unit) * 2); }

十、浏览器兼容性

10.1 支持情况

/* 现代浏览器 */ .element { color: var(--text-color); } /* IE11及以下降级 */ .element { color: #333; }

10.2 检测支持

if (CSS.supports('color', 'var(--test)')) { console.log('支持CSS变量'); } else { console.log('不支持CSS变量'); }

总结

CSS变量是现代CSS的重要特性，通过合理使用CSS变量，你可以：

1. 提高代码可维护性：集中管理样式值
2. 实现主题系统：轻松切换主题
3. 支持响应式设计：动态调整变量值
4. 增强交互能力：通过JavaScript动态修改样式
5. 简化代码：减少重复的硬编码值

开始在你的项目中使用CSS变量，打造更加灵活、可维护的样式系统！