作为前端开发者，我们每天都在和 CSS 打交道。今天分享 5 个我常用的 CSS 技巧，帮你写出更优雅的代码。

1. 使用 CSS 变量实现主题切换

CSS 变量让主题切换变得异常简单：

:root {
  --primary-color: #3498db;
  --bg-color: #ffffff;
  --text-color: #333333;
}

.dark-mode {
  --primary-color: #2980b9;
  --bg-color: #1a1a2e;
  --text-color: #ffffff;
}

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

JavaScript 一键切换：document.body.classList.toggle('dark-mode');

2. Flexbox 居中不再难

告别复杂的 margin 计算，Flexbox 让居中变得直观：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

3. 使用 clamp() 实现响应式字体

clamp() 函数让字体大小自动适应屏幕：

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

最小 1.5rem，最大 3rem，中间随视口宽度变化。

4. 伪元素实现装饰效果

不用额外 HTML，用伪元素添加装饰：

.title::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: #3498db;
  margin-top: 10px;
}

5. Grid 布局快速上手

两列等宽布局只需一行代码：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

实战案例：卡片组件

综合以上技巧，创建一个响应式卡片：

.card {
  --card-bg: var(--bg-color);
  background: var(--card-bg);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.card-title {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  margin-bottom: 10px;
}

结语

这些技巧看似简单，但能显著提升开发效率。建议在实际项目中多练习，形成肌肉记忆。

记住：好的 CSS 不是写得复杂，而是写得聪明。

💡 你有哪些私藏的 CSS 技巧？欢迎在评论区分享！