应警惕布局嵌套超三层，优先拆分为独立组件并采用BEM扁平命名；Flexbox仅用于局部对齐，主结构用文档流；响应式规则内联组件内，状态样式与布局样式分离。
布局嵌套超过三层就该警惕
CSS 初级项目里出现 .container .wrapper .inner .content .item 这种选择器，基本说明结构没拆开，样式正被“撑胖”。这不是语义问题，是维护成本问题——改一个 margin 要翻三页找上下文，加个新模块得复制粘贴一整段嵌套规则。
- 把视觉上独立的区域（如导航栏、商品卡片、表单区块）单独抽成独立组件，各自配
class，不依赖父级 class 控制样式 - 避免用后代选择器
.parent .child做样式定位，改用 BEM 风格的.header-logo、.card-title这类扁平命名 - 如果必须嵌套（比如卡片内按钮需要特殊尺寸），只允许一层：用
.card-button，而不是.card .button
Flexbox 用错方向导致越写越绕
常见错误是给 body 或最外层容器设 display: flex，然后靠 margin: auto 或 flex-grow 挤出中间内容区——这会让后续所有子元素都得配合这个 flex 上下文，一旦加个弹窗或侧边栏，整个布局逻辑就崩。
- 只在真正需要对齐/分布的局部用 Flexbox：比如导航菜单项水平排列、表单左右标签对齐、按钮组居中
- 主结构用常规文档流 +
max-width+margin: 0 auto控制宽度和居中，更稳定也更容易覆盖 - 别用
flex: 1填满剩余空间来替代明确的高度控制；浏览器计算逻辑会变复杂，尤其遇到 padding/border 时容易溢出
媒体查询写在组件内部比堆在最后更可控
把所有响应式规则集中写在 CSS 文件底部，看似“整洁”，实则让每个组件的适配逻辑分散、不可追溯。改一个卡片在小屏下的间距，得先找到它原始定义，再跳到文件末尾找对应断点，中间还可能被其他同名类干扰。
- 每个组件的响应式规则紧贴其基础样式后面，例如
.card { ... } @media (max-width: 768px) { .card { padding: 12px; } } - 断点值统一用变量管理（哪怕只是注释标注），比如
/* mobile: 480px */，避免不同地方写480px、479px、500px不一致 - 优先用
min-width而非max-width写法，符合“移动优先”逻辑，减少覆盖冲突
.search-form {
display: flex;
gap: 8px;
}
.search-form input {
flex: 1;
padding: 8px 12px;
}
@media (max-width: 768px) {
.search-form {
flex-direction: column;
}
.search-form input {
width: 100%;
}
}伪类和状态样式混在布局规则里容易失控
把 :hover、:focus、:disabled 和 width、margin 写在同一段规则里，会导致状态变化时布局抖动（比如 hover 加了 border 导致宽度突变），也难以复用交互逻辑。
立即学习“前端免费学习笔记（深入）”；
- 布局样式（尺寸、位置、显示方式）和状态样式（颜色、边框粗细、阴影）严格分离
- 状态样式统一后置，且只改视觉属性：比如
.btn:hover { background-color: #0066cc; }，不碰padding或transform - 需要动画的状态变化，用
transition显式声明要过渡的属性，避免全写all导致性能掉帧
真正难的不是写多少行 CSS，而是让每一行都只干一件事。结构拆得清，样式才不会互相绑架。
