使用CSS自定义属性

CSS自定义属性（也称为CSS变量）是现代CSS开发中强大的工具，能够显著提高样式表的可维护性和灵活性。本文将详细介绍如何规范地使用CSS自定义属性，并通过正反面示例展示最佳实践。

1. 命名规范

正面示例 ✅

css 复制代码

:root {
  /* 使用有意义的名称前缀 */
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --spacing-medium: 1.5rem;
  --font-size-heading: 2rem;
  --border-radius-default: 4px;
  
  /* 语义化命名 */
  --header-height: 60px;
  --sidebar-width: 250px;
}

反面示例 ❌

css 复制代码

:root {
  /* 无意义的缩写 */
  --clr1: blue;
  --spc: 10px;
  
  /* 过于具体的命名 */
  --button-on-page-2-in-header-color: red;
  
  /* 不一致的命名风格 */
  --mainColor: #333;
  --secondary_color: #666;
}

2. 作用域管理

正面示例 ✅

scss 复制代码

/* 全局变量 */
:root {
  --max-content-width: 1200px;
}

/* 组件作用域变量 */
.card {
  --card-padding: 1rem;
  --card-bg-color: white;
  
  padding: var(--card-padding);
  background-color: var(--card-bg-color);
}

/* 主题变量 */
.theme-dark {
  --card-bg-color: #333;
  --text-color: #fff;
}

反面示例 ❌

css 复制代码

/* 过度使用全局变量 */
:root {
  --button-padding: 0.5rem;
  --card-shadow: 0 2px 4px rgba(0,0,0,0.1);
  --form-input-border: 1px solid #ddd;
}

/* 组件特定样式不应放在全局 */
.header {
  --global-link-color: blue; /* 这会污染全局命名空间 */
}

3. 回退机制

正面示例 ✅

css 复制代码

.element {
  /* 提供合理的默认值 */
  color: var(--text-color, #333);
  margin: var(--spacing, 1rem 0.5rem);
  
  /* 多重回退 */
  font-family: var(--font-primary), var(--font-fallback, sans-serif);
}

反面示例 ❌

css 复制代码

.element {
  /* 无回退值 */
  background-color: var(--bg-color); /* 如果变量未定义，属性将无效 */
  
  /* 不合理的回退 */
  font-size: var(--heading-size, 16px); /* 对于标题来说16px可能太小 */
}

4. 值与计算

正面示例 ✅

scss 复制代码

:root {
  --base-spacing: 8px;
  --spacing-small: calc(var(--base-spacing) * 1);
  --spacing-medium: calc(var(--base-spacing) * 2);
  --spacing-large: calc(var(--base-spacing) * 3);
  
  /* 使用CSS函数 */
  --primary-color-h: 210;
  --primary-color-s: 70%;
  --primary-color-l: 50%;
  --primary-color: hsl(
    var(--primary-color-h),
    var(--primary-color-s),
    var(--primary-color-l)
  );
}

反面示例 ❌

css 复制代码

:root {
  /* 硬编码计算值 */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  
  /* 过度复杂的计算 */
  --header-height: calc((100vh - var(--footer-height) - var(--nav-height)) / var(--some-factor));
}

5. 主题切换实现

正面示例 ✅

scss 复制代码

/* 定义主题变量 */
:root {
  --background-primary: #ffffff;
  --text-primary: #333333;
  --accent-color: #0066cc;
}

[data-theme="dark"] {
  --background-primary: #222222;
  --text-primary: #f0f0f0;
  --accent-color: #4da6ff;
}

/* 应用主题 */
body {
  background-color: var(--background-primary);
  color: var(--text-primary);
}

a {
  color: var(--accent-color);
}

反面示例 ❌

css 复制代码

/* 重复定义而非覆盖 */
.light-theme {
  --bg: white;
  --text: black;
}

.dark-theme {
  --bg: black;
  --text: white;
}

/* 需要同时应用两个类 */
<body class="light-theme dark-theme"> /* 哪个会生效？ */

6. 性能考虑

正面示例 ✅

css 复制代码

/* 在:root中定义常用变量 */
:root {
  --common-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 复用而不是重复定义 */
.card, .modal, .dropdown {
  box-shadow: var(--common-shadow);
}

反面示例 ❌

css 复制代码

/* 过度使用变量导致性能下降 */
div {
  --unique-var: some-value; /* 为每个元素创建变量实例 */
  property: var(--unique-var);
}

/* 频繁变化的变量 */
.element {
  --dynamic-width: calc(100% - var(--offset)); /* 浏览器需要不断重计算 */
  width: var(--dynamic-width);
}

7. SCSS与CSS变量结合

正面示例 ✅

scss 复制代码

// SCSS变量用于预处理
$breakpoints: (
  small: 480px,
  medium: 768px,
  large: 1024px
);

// CSS变量用于运行时
:root {
  @each $name, $value in $breakpoints {
    --breakpoint-#{$name}: #{$value};
  }
}

// 混合使用
@media (min-width: var(--breakpoint-medium)) {
  .container {
    width: map-get($breakpoints, 'medium');
  }
}

反面示例 ❌

scss 复制代码

// 混淆SCSS和CSS变量
$primary-color: var(--color-primary); // 错误！SCSS变量不能引用CSS变量

// 重复功能
$spacing: 1rem;
:root {
  --spacing: 1rem; // 同样的值定义两次
}

总结

CSS自定义属性是强大的工具，但需要遵循规范才能发挥最大价值：

使用一致且语义化的命名约定
合理管理变量的作用域
总是提供适当的回退值
利用calc()进行动态计算
采用主题变量实现样式切换
注意性能影响，避免过度使用
在SCSS中合理区分预处理变量和CSS变量

通过遵循这些规范，您可以创建更可维护、更灵活且性能良好的样式系统。