应删除依赖视觉或位置的class，改用语义化命名；主布局用grid和flex替代旧式定位；启用css modules等作用域控制方案；容器用max-width、字体用rem+clamp实现弹性响应。
布局结构混乱，class 命名像随手起的怎么办
直接改：把 left-box、right-div、big-title 这类依赖视觉或位置的 class 全部删掉。它们在组件复用、主题切换、响应式断点变化时会立刻崩——比如加个 flex-direction: column，left-box 就不“左”了。
换成语义化 + 功能性命名，例如：
-
header-nav（不是top-menu） -
product-card（不是item-box） -
form-field-group（不是input-wrap）
如果不确定语义，就问自己：“这个容器在页面中承担什么角色？它是否可能被复用到其他页面？”答案能帮你筛掉 80% 的随意命名。
一个页面写满 float / display: inline-block / position: absolute 怎么办
这些是 CSS2 时代的补丁式写法，现在还混用会导致布局脆弱、维护成本陡增。现代布局应以 display: flex 和 display: grid 为基底，其余定位仅用于微调。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 主容器（如页头、主体区、侧边栏）优先用
grid划分区域，配合grid-template-areas可读性极高 - 行内元素排列（按钮组、标签列表）统一用
flex，禁用float和inline-block的间隙 hack -
position: absolute只允许出现在模态框、下拉菜单、徽标角标等明确脱离文档流的场景，且必须有position: relative父容器约束
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 240px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
css 文件越写越大，改一个 margin 全局抖三抖怎么办
根本问题是缺乏层级隔离和作用域控制。没有 BEM 或类似约定，所有 class 都在全局竞争样式优先级，最后只能靠 !important 或疯狂加选择器长度续命。
立即可做的三件事：
- 启用 CSS Modules（React/Vue 项目）或
:scope+ 嵌套规则（现代 CSS），让 class 天然局部化 - 把通用布局工具类抽成独立文件：
u-flex-center、u-mt-16、u-text-truncate，命名带u-前缀，禁止业务逻辑侵入 - 删除所有无意义的嵌套选择器，比如
.page .content .section .title→ 改成.section-title并确保它只在一个上下文中使用
响应式断点一加，整个布局就错位怎么办
问题不在媒体查询本身，而在于断点前的布局没做“弹性准备”。比如固定宽度 width: 300px 的卡片，在小屏下必然溢出；又或者 font-size: 18px 写死，缩放后文字撑破容器。
关键调整点：
- 容器宽度优先用
max-width+margin: 0 auto，而不是width: 1200px - 字体单位统一用
rem，根字号用clamp(16px, 1.5vw, 18px)实现流体缩放 - 媒体查询只负责“切换布局形态”，不负责“修正错误”。如果小屏下需要改
flex-direction，说明大屏的flex结构本身就没考虑垂直堆叠
真正专业的布局，不是让 CSS 覆盖更多情况，而是让每一层结构在默认状态下就具备适应性。
