改布局需动十几个文件是因为CSS与HTML耦合过紧；应采用原子类命名、CSS自定义属性接管变量、HTML语义结构优先，从而解耦布局逻辑。
为什么改个布局要动十几个文件？
因为 CSS 布局逻辑和 HTML 结构耦合太紧：一个 .header 类可能同时控制定位、宽高、内边距、字体，还依赖父容器是 .page-wrapper。改版时只要换掉 flex 改成 grid，或把侧边栏从左移到右，就得全局搜 display: flex、float: left、margin-left，再逐个判断是否该删、该改、该保留。
用原子类（Utility-First）替代功能类命名
别写 .card-layout 或 .sidebar-right，直接暴露 CSS 属性意图。Tailwind 是典型，但不用引入框架也能做：
-
mt-4比.has-top-spacing更稳定——后者语义一变，类名就失效；前者永远表示margin-top: 1rem - 改版时只需替换 HTML 中的 class：把
flex-col换成grid-cols-2，不碰任何 CSS 文件 - 避免写
.user-card--compact这类 BEM 变体，它本质还是绑定具体组件形态，复用率低
.d-flex { display: flex; }
.d-grid { display: grid; }
.gap-2 { gap: 0.5rem; }
.justify-between { justify-content: space-between; }
.mt-4 { margin-top: 1rem; }
用 CSS 自定义属性接管可变值
布局中真正需要“改”的，往往不是结构，而是尺寸、断点、颜色这些变量。硬编码在每个选择器里，等于把配置散落在各处：
- 把
max-width: 1200px提成--max-width-lg: 1200px，所有用到的地方都写max-width: var(--max-width-lg) - 媒体查询也用变量：
@media (min-width: var(--breakpoint-md))，改屏宽只需改一处 - 注意：不要用
:root全局塞几十个变量，按模块作用域声明，比如.layout-main { --gap: 1rem; }
HTML 结构优先级高于 CSS 类名
很多改版成本来自“为了适配旧 CSS 而不敢动 HTML”。反过来，先定 HTML 语义结构，再让 CSS 去适配它：
- 用
、、替代一堆- 布局靠现代 CSS（
display: contents、container-type: layout）解耦，而不是靠 class 名强行“模拟”语义- 当必须兼容老浏览器时，宁可用
data-layout="grid"属性驱动 JS 补丁，也不要在 HTML 里塞class="grid-fallback"最麻烦的从来不是“怎么写新布局”，而是“怎么让旧内容在新布局里不崩”。重点守住 HTML 的语义骨架和 CSS 变量的控制点，其他都是可替换的皮肤。
- 布局靠现代 CSS（
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
