内联CSS指style属性，非<style>标签；真正适合单文件发布的应是内部样式表，即<head>中的<style>标签，支持选择器、媒体查询等全部CSS能力，且符合规范。
内联 CSS 就是用 <style>，不是 style 属性
很多人一看到“内联”就下意识去改 <p style="...">，这其实是内联样式（inline styles），它只作用于单个元素，无法复用、难维护，也不满足“单文件发布但结构清晰”的真实需求。真正适合微网页单文件发布的，是内部样式表（internal stylesheet）——即把完整 CSS 写在 HTML 的 <head> 里的 <style> 标签中。
关键区别：style 属性是 HTML 属性，<style> 是 HTML 标签，里面写的是纯 CSS 规则，支持选择器、伪类、媒体查询等全部能力。
- ✅ 正确做法：
<style> .btn { padding: 8px 16px; } @media (max-width: 480px) { .btn { width: 100%; } } </style> - ❌ 错误理解：以为给每个
<div>加style="..."就算“内联引入”，结果生成 20 行重复样式，改颜色要找 15 个地方 - ⚠️ 注意：
<style>必须放在<head>内，放在<body>里虽能渲染，但不符合 HTML 规范，部分邮件客户端或老旧 WebView 会忽略
<style> 里可以放心用现代 CSS 特性吗？
可以，但要看目标环境。微网页常见落地场景是微信内置浏览器（X5）、QQ 浏览器、企业微信 WebView，它们基于较新 Chromium 内核（2024 年后普遍支持 Chrome 90+），以下特性基本可用：
- ✅ Flex 布局、
aspect-ratio、clamp()、:has()（X5 v13.0+ 已支持） - ✅ CSS 变量（
--primary-color），可用于主题切换或 JS 动态注入 - ⚠️
@layer和@container兼容性尚不稳定，X5 v12.x 不识别，建议暂不使用 - ⚠️
scroll-behavior: smooth在 iOS 微信中无效，需 fallback 到 JS 滚动
如果需兼容老版本（如 2022 年前的安卓 X5），建议用 Autoprefixer 或直接检查 caniuse.com 对应特性 —— 不要凭经验假设“微信应该支持”。
立即学习“前端免费学习笔记（深入）”；
如何避免 <style> 内 CSS 过长导致 HTML 文件臃肿？
单文件不等于“把所有 CSS 堆进去”。微网页通常只有 1–3 个视口，样式逻辑有限，但直接粘贴 500 行未压缩 CSS 会让 HTML 难读难调。实际可操作的轻量管理方式：
- 用注释分块：
/* === 基础重置 === */、/* === 卡片组件 === */、/* === 响应式断点 === */ - 删掉无用规则：移除
normalize.css全量引入，只抄需要的几条（如*, *::before, *::after { box-sizing: border-box; }） - 图片资源转 base64：小图标（≤2KB）用
background: url("data:image/svg+xml;base64,...")，省去额外请求，仍保持单文件 - 慎用
@import：它会触发额外 HTTP 请求，破坏“单文件”前提，绝对不要在<style>里写@import url(...)
为什么不用 JS 动态插入 <style>？
有人想用 document.head.appendChild(...) 在 <script> 里注入样式，技术上可行，但会带来两个硬伤：
- ❌ 首屏闪动（FOUC）：HTML 解析完才执行 JS，样式延迟生效，用户先看到无样式的原始内容
- ❌ 打印/截图异常：部分 WebView（如微信）在打印预览或长截图时，可能不捕获 JS 注入的样式
- ✅ 真正需要动态样式时（比如根据 URL 参数切主题），保留
<style>为骨架，用 CSS 变量 + JS 改document.documentElement.style.setProperty()更稳妥
微网页的“单文件”本质是交付确定性 —— 所有渲染依赖必须在 HTML 解析阶段就位。<style> 是唯一既满足该要求、又保留 CSS 全能力的方案。
