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;
}
