5个让你代码更优雅的 CSS 技巧

5个让你代码更优雅的 CSS 技巧

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

font-size: clamp(16px, 2.5vw, 24px);

clamp(最小值, 推荐值, 最大值) 屏幕大就大，屏幕小就小，完全自适应。

2. gap 替代 margin

.container {
  display: flex;
  gap: 16px;
}

gap 在 flex 和 grid 里都能用，再也不用操心第一个元素不加 margin 的问题。

3. aspect-ratio 保持比例

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

再也不用 padding-top: 56.25% 那种黑魔法了。

4. position: sticky 实现吸顶

.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

纯 CSS，零 JS，兼容性也很好。

5. CSS 变量统一管理主题色

:root {
  --primary: #4f46e5;
}
.btn {
  background: var(--primary);
}

换主题只改 :root 里的值，全站颜色一键更新。

总结

CSS 越来越强了，欢迎评论区分享你的技巧！