内联块会拖慢首屏，因其阻塞html解析：浏览器遇即暂停dom构建，待cssom就绪才继续；而外部css可并行下载且被缓存复用，ttfb和fcp更优。
HTML结构和CSS样式必须物理分离，否则首屏渲染、缓存复用、团队协作全都会出问题。
为什么内联
浏览器解析 HTML 时，遇到 <style></style> 就得暂停构建 DOM，等样式规则就绪才能继续。哪怕只写了三行 CSS，它也阻塞整个 HTML 解析流程；而外部 CSS 文件（<link rel="stylesheet">）能并行下载，且被浏览器缓存复用。
- 常见错误现象：
404 Not Found的 CSS 文件没报错，因为<style></style>里写了兜底样式，掩盖了资源加载失败 - 性能影响：每次 HTML 请求都得重传样式，无法利用 HTTP 缓存，TTFB 和 FCP 都变差
- 使用场景仅限极简首屏关键样式（比如 loading 状态的骨架屏），且必须显式加
media="screen and (min-width: 0px)"
class 命名怎么避免后期不敢改？
命名不是为了“让页面看起来对”，而是为了“让别人（包括未来的你）能安全地删、改、复用”。div1、box-red 这类名字一换主题或布局就失效，还容易导致样式冲突。
- 采用 BEM 规范：
product-card（块）、product-card__price（元素）、product-card--sale（修饰符） - 禁用位置/样式特征命名：
left-sidebar→ 改成sidebar；red-button→ 改成button--primary - 工具类前缀统一：
u-text-center表示纯排版工具，js-toggle-menu表示仅作 JS 钩子、不带样式
语义化标签不是“可选加分项”，而是 DOM 构建效率前提
浏览器解析 <header></header>、<nav></nav>、<article></article> 比解析一堆 <div class="header"> 快——语义标签自带隐式 ARIA role，DOM 树更扁平，CSS 选择器也更容易写精准（比如 <code>article h2 而非 .content div h2）。
- SEO 影响直接：搜索引擎靠语义标签判断内容权重，
<h1></h1>必须唯一且在<main></main>内 - 无障碍基础：屏幕阅读器依赖这些标签导航，没有它们，a11y 测试基本过不了
- 不要为了“兼容旧 IE”放弃语义：现代项目早已无需支持 IE，
<section></section>和<aside></aside>不需要 polyfill
真正卡点不在“会不会写语义标签”，而在“敢不敢删掉那些 style="" 和 <style></style> 块”。一旦 HTML 里混入样式逻辑，后续任何自动化提取、按需加载、主题切换都会变成手动缝合。
