css制作技巧

CSS选择器优化

优先使用类选择器而非标签选择器，减少层级嵌套。复合选择器不超过3层，避免过度限定如div.container > ul.nav > li.item。

/* 推荐 */
.btn-primary {}
.nav-item {}

/* 避免 */
body > header > nav > ul > li > a {}

布局方案选择

Flexbox适合一维布局，Grid适合二维布局。传统浮动布局应逐步替换，BFC特性可用于清除浮动。

/* Flexbox示例 */
.container {
  display: flex;
  justify-content: space-between;
}

/* Grid示例 */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

响应式设计实现

使用媒体查询时采用移动优先原则，断点设置参考常见设备分辨率。视口单位vw/vh适合全屏元素。

/* 移动优先原则 */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

性能优化技巧

避免使用@import引入CSS，压缩CSS文件大小。will-change属性提前告知浏览器可能变化。

/* 硬件加速 */
.transform-element {
  transform: translateZ(0);
}

/* 减少重绘 */
.static-element {
  will-change: opacity;
}

变量与复用

CSS自定义变量实现主题切换，减少重复代码。预处理器的嵌套语法需合理使用。

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

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

浏览器兼容处理

使用autoprefixer自动添加厂商前缀，特性检测替代浏览器嗅探。渐进增强策略保证基础功能。

/* 自动前缀示例 */
.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

动画实现要点

优先使用transform和opacity属性触发GPU加速，requestAnimationFrame替代setTimeout。

@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.animated {
  animation: slide 0.3s ease-out;
}