用 display: grid 可简化布局维护，支持区域命名与自适应列宽；避免 flex 深度嵌套与 margin 依赖；组件应自带完整样式；优先用 clamp() 和容器查询替代单一 max-width 媒体查询。
用 display: grid 替代固定行列的 float 或 inline-block
浮动布局和行内块在新增列、调整顺序或响应式切换时，往往要重写大量 margin、width 和清除浮动逻辑。而 grid 天然支持「区域命名 + 位置声明」，新增一个区块只需在 grid-template-areas 里加个名字，并用 grid-area 指定它该去哪。
常见错误是只用 grid-template-columns 写死列宽，导致小屏下内容溢出。应该配合 minmax() 和 auto-fit：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
这样既保证单列最小宽度，又能在空间充足时自动均分，无需媒体查询就能适应不同容器宽度。
避免深度嵌套的 flex 容器链
一层 display: flex 很好控制，但嵌套三层以上（比如 .header > .nav > .item > .icon）会让子元素的对齐、收缩行为变得不可预测——尤其当某层加了 flex-wrap: wrap 或 align-items: stretch，会意外影响下级尺寸。
实操建议：
- 把需要独立控制的区域提成同级
grid子项，而不是靠父flex去“挤”出来 - 用
gap代替margin控制间距，避免 margin 合并或父子塌陷干扰布局流 - 慎用
flex: 1，它会让元素强行撑满剩余空间，一旦后续加新元素，容易触发高度错乱或滚动条闪现
组件级样式不依赖外层结构类名
扩展性差的典型表现：写了个卡片组件，但它的圆角、阴影、内边距全靠父容器加 .card-list 类才生效，换到侧边栏或模态框里就变形。这意味着样式耦合了使用场景，不是真组件。
应该让组件自身具备完整视觉定义：
.card {
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
padding: 1rem;
background: #fff;
}
<p>/<em> 需要不同变体时，用修饰符，而不是依赖父类 </em>/
.card--compact { padding: 0.5rem; }
.card--fluid { width: 100%; }</p>
这样无论把它插进 grid、flex 还是普通 div，外观都稳定。扩展时只需加新修饰符，不用动结构 HTML。
媒体查询别只写 max-width 断点
只靠屏幕宽度判断布局是否需要变化，容易在平板横竖屏、桌面缩放、大屏小窗口等场景失效。更健壮的方式是结合容器查询（@container）或用 clamp() 做弹性字号/间距。
例如标题字体不应写死 font-size: 1.5rem，而应：
h2 {
font-size: clamp(1.125rem, 4vw, 1.5rem);
}
这样它会在小屏保底、中屏随容器线性增长、大屏封顶，比写三套媒体查询更轻量，也更容易复用到其他组件。
真正难的是保持 grid 区域命名与业务语义一致，而不是按视觉位置起名（比如别叫 "left-col"，改用 "main-content"）。否则产品需求一变，布局重构时连类名都要重翻一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
