用 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;
}
/ 需要不同变体时，用修饰符，而不是依赖父类 /
.card--compact { padding: 0.5rem; }
.card--fluid { width: 100%; }

这样无论把它插进 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"）。否则产品需求一变，布局重构时连类名都要重翻一遍。