AI生成CSS代码开发页面到底是省了时间还是攒了无力偿还的技术债：500多行CSS全是!important行内样式和重复的选择器改一个按钮颜色需要花半小时排查样式冲突规则，原因在于原来的开发者是后台转前端遇到样式问题就搜一段贴上去

独立的组件，如 .search-form、.nav-bar

块里的子元素，用双下划线连接：.search-form__input、.search-form__button

状态的变体，用双连字符连接：.search-form--large、.search-form__button--disabled

1. 水平垂直居中（三选一）

Flexbox（最推荐）
display: flex; justify-content: center; align-items: center;

Grid（一行搞定）
display: grid; place-items: center;

Transform（兼容旧版）
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

2. 文字超出省略

单行省略
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

多行省略（2行）
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;

3. 卡片阴影（不用切图）

轻阴影（hover用）
box-shadow: 0 2px 8px rgba(0,0,0,0.08);

悬浮感（卡片用）
box-shadow: 0 4px 16px rgba(0,0,0,0.12);

大气泡（弹窗用）
box-shadow: 0 8px 32px rgba(0,0,0,0.16);

4. 渐变背景

线性渐变（最常用）
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

径向渐变（光晕感）
background: radial-gradient(circle at 30% 50%, #fff, #f0f0f0);

5. 按钮交互（hover+active）

过渡动画
transition: all 0.2s ease;

hover上浮
:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }

active按压
:active { transform: translateY(0); }

颜色类（6-8个）

主色、主色hover、成功、警告、错误、背景、文字、边框

间距类（4-6个）

xs(4px)、sm(8px)、md(16px)、lg(24px)、xl(32px)、2xl(48px)

尺寸类（3-5个）

圆角(4/8/12px)、字体(12/14/16/20/24px)、阴影(轻/中/重)

动画类（2-3个）

过渡时长(fast 0.15s / normal 0.3s / slow 0.5s)

用这行代码代替大部分媒体查询

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

这行代码的意思是：每个格子最少280px宽，一行放不下就自动换行。不需要写@media (max-width: 768px)来判断什么时候换行——浏览器自己算。卡片列表、产品网格、相册布局都可以用这一行搞定。

用clamp()代替断点写字号

font-size: clamp(1rem, 2.5vw, 1.5rem);

字号在16px到24px之间平滑缩放，不用在@media里写死"手机14px、平板18px、桌面24px"。clamp(最小值, 首选值, 最大值)，三个参数让字号随屏幕宽度连续变化。

1. 动画只用 transform 和 opacity

浏览器对transform和opacity有GPU加速，动画在合成层上跑，不触发重排（reflow）。用left、top、width做动画会触发重排，页面卡顿的罪魁祸首。

❌ transition: left 0.3s;   ✅ transition: transform 0.3s; transform: translateX(20px);

2. 避免深层嵌套选择器

浏览器解析CSS是从右往左的。.header .nav .list .item span这个选择器，浏览器要先找到所有span，再逐层往上匹配。嵌套不要超过3层。

❌ 5层嵌套   ✅ 用BEM命名减少嵌套：.nav__item-text

3. will-change 预告动画

对即将执行动画的元素加上will-change: transform;，浏览器会提前为该元素创建独立的合成层。动画结束记得移除，不然会占显存。

⚠️ 不要给所有元素都加will-change，只给即将动画的元素加，用完移除。

4. 避免 @import 引入CSS

CSS文件里的@import url(...)会创建串行请求：先下载A.css，解析到@import后再下载B.css。用<link>标签并行加载。

❌ @import url("reset.css");   ✅ HTML里写两个<link>标签并行加载