CSS 进阶实战：变量、兼容性与性能优化

一、CSS 变量（Custom Properties）

CSS 变量是现代 CSS 中最具革命性的特性之一，它彻底改变了我们管理和维护样式的方式。

1.1 基本用法

:root {
  --primary-color: #3498db;
  --spacing-unit: 8px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
}

1.2 变量作用域

CSS 变量遵循级联规则，可以在不同作用域中覆盖：

:root { --text-color: #333; }
.dark-mode { --text-color: #fff; }

body {
  color: var(--text-color);
}

1.3 动态修改变量

通过 JavaScript 可以实时修改变量值：

document.documentElement.style.setProperty('--primary-color', '#ff5722');

1.4 实践建议

主题切换：使用变量存储主题颜色，轻松实现暗黑模式
设计系统：定义间距、字体大小等设计变量，保持一致性
响应式调整：通过媒体查询修改变量值，实现响应式设计

二、浏览器前缀处理

2.1 常见前缀

前缀	浏览器
`-webkit-`	Chrome, Safari
`-moz-`	Firefox
`-ms-`	Internet Explorer
`-o-`	Opera

2.2 使用示例

.transition {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

2.3 自动化处理方案

现代前端工具可以自动添加前缀：

PostCSS + Autoprefixer

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versions']
    })
  ]
}

Webpack 配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  }
}

2.4 实践建议

避免手动编写前缀：使用构建工具自动处理
定期检查浏览器支持：通过 Can I Use 了解属性兼容性
渐进增强：先写标准语法，再考虑前缀

三、CSS 性能优化

3.1 选择器优化

优化原则：

避免嵌套过深（不超过3层）
避免使用通配符选择器
减少属性选择器的使用

3.2 渲染性能优化

关键指标：

回流（Reflow）：几何属性改变触发的重新布局
重绘（Repaint）：外观改变但不影响布局

优化技巧：

/* 触发硬件加速 */
.animate {
  transform: translateZ(0);
  will-change: transform;
}

/* 减少回流 */
.batch-update {
  position: absolute;
  left: 0;
  top: 0;
  /* 一次性修改 */
  transform: translate(10px, 20px);
}

3.3 资源加载优化

避免的写法：

@import url("reset.css");
@import url("components.css");

推荐的写法：

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="components.css">

<!-- 预加载关键CSS -->
<link rel="preload" href="critical.css" as="style">

3.4 实践建议

关键CSS内联：首屏关键样式直接内联在HTML中
按需加载：使用媒体查询拆分CSS文件
压缩CSS：生产环境使用工具如cssnano
减少@import：会增加HTTP请求和渲染阻塞

四、综合实战案例

4.1 主题切换实现

:root {
  --bg-color: #fff;
  --text-color: #333;
  --primary: #3498db;
}

[data-theme="dark"] {
  --bg-color: #222;
  --text-color: #eee;
  --primary: #ff5722;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
}

4.2 响应式间距系统

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

@media (min-width: 768px) {
  :root {
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;
  }
}

五、总结

CSS变量：提升样式可维护性，实现动态主题
浏览器前缀：使用工具自动化处理，关注标准写法
性能优化：从选择器、渲染、资源加载多维度优化

通过合理应用这些高级特性，可以构建更灵活、高效且易于维护的CSS架构。

CSS进阶：变量、兼容性与性能优化实战指南