响应式断点设 4 个最合理：320px、768px、1024px、1440px；Flexbox 用于一维排列，Grid 用于二维布局；CSS 自定义属性应只抽离主题色、字体栈等真正可变值；第三方样式需通过 scoped、哈希类名或按需引入隔离。
响应式断点该设几个才不返工
断点不是越多越好，主流设备宽度集中在 320px（小屏手机）、768px（平板 竖屏）、1024px（平板横屏 / 小桌面）、1440px（主流桌面）这四档。盲目加 1280px、1366px 等中间值，反而让媒体查询碎片化，维护成本翻倍。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 用
@media (min-width: 768px)覆盖平板及以上，避免为「iPhone SE + Chrome 横屏」这种边缘场景单独写规则 - 优先用相对单位（
rem、%、clamp()），减少像素级微调需求 - 在设计稿阶段就和 UI 约定只输出
320、768、1440三套标注，开发不接「任意宽度适配」需求
Flexbox 和 Grid 到底该谁主导布局
Flexbox 适合一维 排列（比如导航栏、卡片列表），Grid 才是二维布局的正解（比如首页模块网格、表单字段对齐）。混用时容易出现嵌套过深、flex-wrap 与 grid-template-columns 行为冲突等问题。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 整页结构用
display: grid划分header/main/aside/footer区域，用grid-template-areas直观定义布局意图 - 区域内部子元素用 Flexbox 对齐或换行，例如
main里的文章卡片列表用display: flex; flex-wrap: wrap; - 避免在 Grid 容器里再套一层 Flex 容器来「微调对齐」——该改的是 Grid 的
justify-items或子项的justify-self
CSS 自定义属性怎么避免变成新包袱
用 --color-primary 替代散落的 #007bff 是对的，但若把所有间距、圆角、阴影都抽成变量，又没按语义分组管理，很快就会出现 --spacing-xs-2、--radius-card-inner 这类难以追溯的命名。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 只抽离真正会变的值：主题色、字体 栈、基础字号缩放比（
--fs-scale），而不是每个margin都设变量 - 用
:root定义全局基础变量，组件内用--component-name-spacing局部覆盖，禁止跨层级透传 - 配合 PostCSS 插件
postcss-custom-properties编译时降级，别依赖运行时 JS 注入变量
第三方 UI 库的样式入侵怎么快速隔离
引入 ant-design 或 element-plus 后，它的 .ant-btn 全局样式可能污染你自定义的 button 样式，尤其当项目已有大量 !important 时，排查成本极高。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 用 CSS Scope（如 Vue 的
- 重置前缀：构建时通过 Webpack 的
css-loader配置modules.localIdentName，让第三方样式类名自动带哈希，避免全局污染 - 禁用库的默认 CSS：比如
import 'element-plus/es/components/button/style/css'替代全量import 'element-plus/dist/index.css'
:root {--color-brand: #2563eb; --space-unit: 0.5rem; --radius-base: 0.375rem;} .layout-grid {display: grid; grid-template-areas: "header header" "aside main" "footer footer"; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto;} @media (max-width: 767px) {.layout-grid { grid-template-areas: "header" "main" "aside" "footer"; grid-template-columns: 1fr;} } 实际项目中最容易被忽略的，是把「适配」当成纯 前端 任务——UI 出图没按断点分层、后端 返回的图片 URL 没带尺寸参数、甚至字体文件没开 font-display: swap 导致文字闪动，都会让 CSS 布局方案打折扣。
