CSS 进阶技巧：变量、兼容性与性能优化

一、CSS 变量（Custom Properties）

CSS 变量是现代 CSS 中最强大的特性之一，它允许开发者在样式表中定义可重用的值。

基本用法

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

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

变量作用域

CSS 变量遵循级联规则，可以在不同作用域中重新定义：

:root {
  --text-color: black;
}

.dark-mode {
  --text-color: white;
}

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

实践建议

命名规范：使用语义化命名（如--color-primary而非--blue）
默认值：var(--custom-property, fallback-value)

JavaScript 交互：

// 获取变量
getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

// 设置变量
document.documentElement.style
  .setProperty('--primary-color', '#ff0000');

二、浏览器前缀处理

常见前缀

前缀	浏览器
`-webkit-`	Chrome, Safari
`-moz-`	Firefox
`-ms-`	IE/Edge
`-o-`	Opera

示例：渐变背景

.background {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1-6.0 */
  background: -o-linear-gradient(red, blue);     /* Opera 11.1-12.0 */
  background: -moz-linear-gradient(red, blue);   /* Firefox 3.6-15 */
  background: linear-gradient(red, blue);        /* 标准语法 */
}

现代解决方案

使用 PostCSS 的 autoprefixer：

// package.json
"browserslist": [
  "last 2 versions",
  "> 1%"
]

CSS 预处理器混合宏（Sass 示例）：

@mixin transition($property) {
  -webkit-transition: $property;
  -moz-transition: $property;
  -o-transition: $property;
  transition: $property;
}

三、性能优化策略

1. 选择器优化

优化建议：

避免 .nav ul li a 这样的深层嵌套
减少使用 * 通配符
类选择器性能优于属性选择器

2. 避免 @import

/* 不推荐 - 阻塞渲染 */
@import url("styles.css");

/* 推荐 - 并行加载 */
<link rel="stylesheet" href="styles.css">

3. 关键 CSS 技术

<style>
  /* 内联首屏关键CSS */
  .header { ... }
  .hero { ... }
</style>
<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="main.css"></noscript>

4. 减少重绘与回流

触发回流的属性：

几何属性：width, height, margin, padding
布局属性：display, position, float
获取布局信息：offsetTop, getComputedStyle

优化技巧：

// 批量修改DOM
const fragment = document.createDocumentFragment();
items.forEach(item => fragment.appendChild(createItem(item)));
list.appendChild(fragment);

四、实用工具推荐

CSS 统计工具：

npm install -g cssstats
cssstats styles.css

PurgeCSS (移除未使用CSS)：

// webpack.config.js
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

plugins: [
  new PurgeCSSPlugin({
    paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
  }),
]

Critical CSS 提取：

npm install -g critical
critical https://example.com --base dist

总结

掌握 CSS 变量、兼容性处理和性能优化是现代前端开发的必备技能。通过合理使用这些技术，可以创建更易维护、高性能的样式系统。记住：

使用 CSS 变量提高代码可维护性
通过工具自动化处理浏览器前缀
始终关注选择器性能和渲染效率
利用现代工具链优化CSS交付

这些技巧将帮助你在项目中实现更专业的CSS架构。

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