精细还原设计稿需HTML与CSS协同设计：语义化标签锚定结构、选择器层级≤2级、全局box-sizing和rem单位、断点严格对齐设计稿、viewport必设，核心是保障可维护性。
精细还原设计稿时，HTML结构和CSS样式不是“先切图再套样式”的线性动作，而是从第一行 <header> 开始就互相锁定的协作过程。结构错半像素，CSS就得用负 margin 或 transform 补救；类名起得模糊，后续改色、换布局时连 selector 都不敢动。
HTML语义标签是否匹配视觉区块意图
设计稿里的“轮播区”“商品卡片流”“侧边筛选栏”，不能直接写成 <div class="section-3">。浏览器不认“section-3”，但认 <section>、<aside>、<article> —— 这些标签自带语义权重和默认行为（比如 <main> 是唯一主内容容器），CSS选择器才能靠它稳定锚定。
- 检查每个视觉模块是否对应一个语义容器：
<nav>用于主导航，<footer>不该出现在卡片内部 - 避免用
<div>套<div>模拟布局，尤其当 Flex/Grid 已能直驱子元素时 - 如果设计稿要求某区域“视觉上居中但语义上是辅助信息”，优先用
<aside>+display: contents，而非硬加 class 再写一堆定位
CSS选择器是否与HTML结构形成低耦合高可控关系
还原设计稿最常踩的坑是：为了压住某个按钮颜色，写出 div div div .btn-primary 这种后代选择器。它脆弱、难调试、性能差——浏览器要从右往左反复回溯 DOM 树。
- 把选择器层级控制在 2 级以内：
section .card比.page-wrapper .content .list .item .card更可靠 - 优先用语义标签本身做选择器：
article h2比.post-title更不易因重构断裂 - 高频交互元素（如折叠按钮、切换 tab）必须有明确的
id或短类名（如js-toggle），别指望靠nth-child(3)定位 - 慎用
!important—— 出现即说明选择器权重失控，应回溯 HTML 结构或重写 CSS 规则顺序
box-sizing 和尺寸单位是否全局统一
设计稿给的是 375px 宽度，你写 width: 375px; padding: 16px;，结果元素总宽变成 407px —— 这就是没设 box-sizing: border-box 的典型症状。所有项目起步必须全局重置。
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 入口文件顶部加：
* { box-sizing: border-box; }或更安全的html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } - 字体大小统一用
rem，根字号（font-size）设在html上，避免px和em混用导致缩放错乱 - 间距（margin/padding）禁用
auto居中做布局，除非父容器明确是 flex/grid 容器；否则用margin: 0 auto前确认宽度已固定
响应式断点与媒体查询是否绑定设计稿实际尺寸
设计稿标注了「移动端最大宽度 375px」「平板 768px」「桌面 1440px」，但你的 @media 却写成 (max-width: 767px)，中间留了 1px 缝隙 —— 这会导致某些设备刚好卡在边界上，样式失效。
- 断点值必须严格对齐设计稿标注，不要凭经验四舍五入
- 媒体查询内避免嵌套复杂选择器，例如
@media (min-width: 768px) { .header nav ul li a { ... } }易被覆盖；应提取为独立规则集 - 检查
<meta name="viewport">是否存在且 content 值为"width=device-width, initial-scale=1"，缺它移动端 layout 就全乱 - 用开发者工具的设备模拟器逐个测试断点触发时机，观察 DOM 是否真的应用了对应样式，而非仅看 CSS 文件里写了什么
真正难的不是让像素对齐，而是每次加一个 class、写一条 media query、改一次 display 时，都得问一句：这个改动会不会让下个接手的人，在改另一个颜色时，不得不重写整个选择器链？
