HTML语义化是CSS稳定工作的前提，而非加分项；必须用<header><nav><main>等语义标签构建可预测结构，避免div滥用，CSS选择器应基于标签、属性和伪类匹配真实DOM，而非依赖易变的class名。
HTML结构必须语义化，否则CSS选择器会失效或失控
语义化不是“加分项”，而是CSS能稳定工作的前提。比如用 <div class="header"> 代替 <header>，表面看样式能加，但后续维护中容易出现多个“header”类混用、层级嵌套错乱、无障碍支持缺失等问题。
真正影响协同的是结构可预测性：浏览器解析 <nav> 时生成的 DOM 节点类型固定，nav ul li 这类选择器才具备复用性和可读性；而 div div div ul li 一换模板就断。
- 优先使用
<header>、<nav>、<main>、<article>、<section>、<footer>等语义标签 - 功能型容器（如卡片、菜单）用类名标识，例如
<article class="card">，不破坏语义层级 - 避免为样式目的新增无意义的
<div>包裹层——Flexbox 和 Grid 已能直接作用于语义标签
CSS选择器要匹配HTML结构，而不是强行“套用”
常见错误是写一个万能类 .btn，然后在所有按钮上硬加，结果发现 <button>、<a role="button">、<input type="button"> 行为不一致，CSS 里又得补一堆 hack。
更稳妥的做法是让选择器反映真实结构和意图：form button[type="submit"] 比 .btn-primary 更精准；nav a[href] 比 .menu-link 更可靠——因为前者依赖 HTML 属性，后者依赖人工维护的类名。
立即学习“前端免费学习笔记（深入）”；
- 多用属性选择器（
[href]、[type="submit"]）、伪类（:disabled、:focus-visible）增强语义匹配 - 慎用 ID 选择器做样式控制，ID 应仅用于 JS 锚点或 ARIA 关联，CSS 中优先用类
- 当需要覆盖默认样式（如表单控件），先确认是否可通过
appearance: none+ 自定义实现，而非用!important强压
外部样式表必须通过 <link> 正确引入，路径和加载时机决定渲染成败
把 style.css 放错目录、拼错文件名、漏写 rel="stylesheet"，都会导致 CSS 完全不生效——浏览器不会报错，只会静默回退到默认样式，这种“没反应”比报错更难排查。
更隐蔽的问题是加载顺序：<link> 必须放在 <head> 内，且位于 <title> 之后、<script> 之前；如果误把 <link> 放在 <body> 底部，部分浏览器会阻塞渲染直到样式加载完成，造成 FOUC（Flash of Unstyled Content）。
- 检查浏览器开发者工具的 Network 面板，确认
style.css状态码是200，不是404或blocked - 路径一律用相对路径，从 HTML 文件位置出发计算，例如
css/style.css表示同级目录下的css文件夹 - 避免在
<head>中混用<style>和<link>处理同一类样式，优先用外部文件保证可缓存性
盒模型和布局方式必须与HTML元素默认行为对齐
很多布局问题本质是没尊重 HTML 元素的天然显示特性。比如给 <span> 设 width 和 margin 不生效，是因为它是行内元素；又比如 <img> 默认带底部空白，其实是行内对齐基线造成的，不是 margin 问题。
Flexbox 和 Grid 是解药，但前提是别强行把块级语义标签（如 <section>）再包一层 <div> 去“适配”旧式浮动布局——现代布局可以直接作用于语义容器本身。
- 遇到尺寸异常，先查
display值：inline元素不响应width/height，inline-block才开始支持 - 用
box-sizing: border-box统一所有元素的盒模型，避免 padding/border 溢出宽度计算 - 响应式断点不要只靠媒体查询，结合
min-content、max-content、fit-content等内在尺寸关键词做弹性约束
<div> 而不是原生语义容器。这些点不解决，再多的 Flexbox 技巧也救不了结构失衡的页面。 
