内联 <style> 是按页面最小化引入 CSS 且零 JS 开销的唯一方式，因其静态注入、无构建介入、作用域隔离；import CSS 易触发构建链路，破坏最小化。
直接在页面级 .astro 文件里写 <style>，是目前唯一真正实现「按页面最小化引入 CSS」且零 JS 开销的方式。
为什么 <style> 内联是最小化的根本解法
Astro 对 <style> 块的处理是静态、无构建介入的：它不走 PostCSS、不触发 Tailwind 插件、不生成独立 .css 文件，也不打包进全局样式表。最终只是把 CSS 字符串原样注入到 HTML 的 <head> 中，作用域天然隔离（类名不会泄露），且仅服务于当前页面或组件。
- 适用场景：单页独有样式（如
src/pages/about.astro的封面动效、src/components/ContactForm.astro的表单验证状态） - 不适用场景：需要跨页面复用的工具类（如
.sr-only）、带复杂嵌套媒体查询的响应式系统、含变量或函数的动态逻辑 - 常见错误现象：写了
@import url('./base.css')或background: url('/img/pattern.svg')—— 这会强制 Astro 启动资源解析流程，可能触发额外请求或构建时依赖
import '../styles/page-specific.css' 为什么容易失控
看似只引入一个文件，但 Astro 的 CSS 处理链路对「纯静态」极其敏感。一旦该 CSS 文件里出现以下任一内容，就会悄悄激活构建插件，JS 开销立刻回归：
-
@tailwind base/@layer components—— Tailwind 插件启动 -
@import 'vars.css'—— 触发模块依赖图分析 -
url(../fonts/inter.woff2)—— 进入 Vite 资源处理管道 - 哪怕只是
@media (prefers-reduced-motion)嵌套过深，某些 PostCSS 插件也会被拉起
关键判断点：只要 import 的 CSS 文件不是完全由声明式规则（selector { prop: value }）构成，就不是「最小化引入」。
立即学习“前端免费学习笔记（深入）”；
如何安全地复用少量样式又不破防
当多个页面确实需要共用几条规则（比如统一的卡片阴影或按钮悬停色），推荐用「原子化内联 + 显式复制」而非 import 链接：
- 在
src/styles/atoms.css里只写最简规则，例如：.shadow-card { box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .btn-primary:hover { background-color: #2563eb; } - 在每个需要它的
.astro页面中，手动import这个文件 —— 但前提是确认它不含任何构建指令 - 更稳妥的做法：把这几条规则直接复制进各页面的
<style>，用注释标明来源，例如/* from atoms.css v1 */ - 绝对不要试图用
css`...`模板字符串或@vanilla-extract来“按需导出”——它们都依赖构建期编译，已脱离「最小化」范畴
真正的最小化，本质是放弃复用幻想，接受「每个页面的样式就是它自己该有的样子」。最容易被忽略的是：开发者常以为 import 一个空 CSS 文件很轻量，却没意识到 Astro 的构建器早已在背后加载了整个 CSS 处理栈——那几 KB 的样式代码，可能换来几百 KB 的 JS 构建产物。
