响应式开发应统一管理断点变量与媒体查询mixin、限制嵌套层级≤3层并用bem语法扁平化、禁用跨文件@extend改用@include、分离布局与视觉响应逻辑，核心在于职责边界清晰化。
响应式断点写死在媒体查询里，改起来像修水管
直接把 768px、1024px 这类数值散落在各处 CSS 文件里，等于给后续维护埋雷。改一个断点，得全局搜索替换，漏一处就导致某块布局错乱。
用预处理器（如 Sass）抽离为变量是基本操作，但光定义 $breakpoint-mobile: 480px 不够——真正要解决的是「哪一层该响应」和「谁该响应」的职责混乱。
- 断点变量统一放在
_variables.scss，命名带语义：$bp-sm、$bp-md、$bp-lg，不写mobile/tablet这类设备词（设备尺寸每年变，语义断点更稳定） - 媒体查询封装成 mixin，比如
@mixin media-breakpoint-up($bp)，内部用@media (min-width: $bp)，避免手写重复逻辑 - 禁止在组件内部直接写
@media；所有响应行为必须通过 mixin 注入，确保断点控制权收口
Sass嵌套过深导致CSS选择器爆炸
嵌套三层以上，生成的选择器会变成 .header .nav .item .link:hover 这种长串，不仅权重失控，还让 CSS 文件体积虚高，浏览器解析也慢。
嵌套不是为了“看着整齐”，而是表达「强归属关系」。按钮图标跟按钮状态强相关？可以嵌套。但导航栏和页脚样式毫无关联，硬塞进同一个 .layout 嵌套块里，就是结构污染。
- 单文件嵌套层级建议 ≤ 3 层；超过就拆出
_nav.scss、_footer.scss - 用
&__element和&--modifier语法替代深层嵌套，例如.card { &__title { } &--compact { } }，生成的是扁平选择器，非嵌套链 - 慎用
& + &或& ~ &这类兄弟选择器嵌套，容易产出不可预测的匹配路径
@extend 复用样式时，输出的CSS顺序让人抓狂
@extend 看似省代码，但 Sass 会把被扩展的占位符（%btn-base）提到它首次被引用的位置，如果多个文件都 @extend 同一个占位符，最终 CSS 里它的声明可能出现在任意位置，导致样式被意外覆盖。
尤其在响应式场景下，你本想让 .btn--primary 在 md 断点下变宽，结果 %btn-base 的 padding 规则被插到后面，直接干掉前面的响应式设置。
- 禁用跨文件
@extend；同一文件内使用也要确保被扩展的占位符定义在最顶部 - 优先用
@include+ mixin 替代@extend，mixin 是“复制粘贴”逻辑，输出顺序可控 - 如果真要用
@extend，只用于极简的、无响应逻辑的原子规则（比如纯重置%visually-hidden）
移动端优先写法下，大屏样式覆盖小屏时漏掉关键属性
写 @media (min-width: $bp-lg) 覆盖大屏时，常只改 width 或 grid-template-columns，却忘了 font-size、line-height、padding 这些影响阅读体验的属性也需要同步调整。结果大屏上看文字挤成一团，留白全无。
这不是“忘了加”，而是结构没分层：基础排版规则（字号、行高、间距）和布局规则（栅格、定位）混在同一选择器里，响应时只能靠记忆补漏。
- 把基础排版抽成独立 mixin：
@mixin type-scale-lg，专门管字体相关响应 - 布局类响应（
display: grid、flex-direction）和视觉类响应（font-size、opacity）分开写，避免一改布局就漏视觉 - 用 CSS 自定义属性（
--font-size-base）配合 JS 检测视口，对动态内容做细粒度响应（比如表格列宽），别全压给 CSS 媒体查询
响应式不是加一堆 @media 就完事，而是把「哪些东西会随屏幕变」「它们怎么变」「变的时候要不要联动」这三件事，在结构上切清楚。嵌套和变量只是工具，真正卡住人的，永远是职责边界划在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
