外部样式表是默认首选，应使用<link rel="stylesheet">放在<head>内且在<script>前；内部样式表< style >适用于单页应用壳页面等场景；内联样式仅用于动态生成、critical CSS或邮件兼容；@import应避免使用。
外部样式表是默认首选，除非你明确需要单文件交付、快速原型或调试临时样式。
什么时候该用 <link rel="stylesheet">
绝大多数生产环境页面都该走这条路。它让浏览器能并行下载 CSS、支持缓存复用、避免 FOUC（无样式内容闪烁），而且样式与结构彻底分离。
常见错误现象包括：样式没生效、页面闪白、响应式断点失效——八成是 <link> 放错了位置或路径写错。
-
<link>必须放在<head>内，且最好在所有<script>标签之前 - 路径优先用相对路径（如
href="css/main.css"），避免硬编码域名；CDN 资源则用完整 URL（如href="https://cdn.example.com/ui.css"） - 不要把
<link>放在<body>里——部分浏览器会阻塞渲染，甚至触发重排 - 如果样式仍不加载，检查浏览器开发者工具的 Network 面板，看该 CSS 文件是否返回 404 或 MIME 类型错误（应为
text/css）
内部样式表 <style> 的适用边界
适合单页应用（SPA）的初始壳页面、邮件模板、静态演示页，或某些 CMS 导出限制只能传一个 HTML 文件的场景。
立即学习“前端免费学习笔记（深入）”；
它比内联样式更可控，但无法被缓存，也不利于组件化拆分。一旦页面变大，<style> 块会迅速臃肿难维护。
- 务必写在
<head>中，不能放在<body>开头或中间 - 避免在
<style>里用@import——它会阻塞渲染，且必须置于所有规则最前，极易出错 - 可以用
media属性做简单响应式（如<style media="print">），但复杂逻辑仍建议抽离为独立文件
内联样式
它不是“偷懒写法”，而是有明确语义场景的：动态生成的样式（如 JS 计算后的 top/left）、服务端渲染时的 critical CSS、或邮件客户端兼容性兜底（很多邮件客户端只认内联）。
滥用会导致样式权重失控、无法用媒体查询覆盖、审查元素时难以定位来源。
- 仅用于单个元素的瞬时状态，比如
<div style="transform: translateX(120px);"> - 不要用它写重复规则（例如给 5 个
<p>都加style="margin:0"），这违背 CSS 的初衷 - JS 操作样式时，优先改
className或dataset，而非直接拼style字符串
@import 在现代项目中基本可以忽略
它在 CSS 文件或 <style> 块里引入其他 CSS，但会串行加载、阻塞渲染、无法利用 HTTP/2 多路复用，还容易因顺序问题静默失败。
Webpack/Vite 等构建工具默认不处理 @import（除非显式配置），而原生支持的场景极少。连 Bootstrap 官方文档都已弃用它作为主引入方式。
- 如果你在
<style>里写了@import，请立刻换成<link> - 若必须模块化 CSS，用构建工具的
import语法（如@import "./base.css";在 Sass/Less 中） - 唯一合理使用点：CSS 打印样式表中条件导入（
@import "print.css" print;），但也要确认目标环境支持
真正容易被忽略的点是：外部 CSS 的加载时机和 JavaScript 的执行顺序。哪怕路径全对、语法无误，只要 <script> 在 <link> 前执行并读取了 DOM 样式，就可能拿到空值——这不是 CSS 问题，而是资源调度问题。
