优先用外部CSS文件，因其可缓存、复用、利于协作；内联样式和块仅适用于特定场景如关键CSS、动态样式或受限环境。
样式代码写在 <style></style> 标签里还是外部文件中？
优先用外部 CSS 文件（.css 文件），除非是极简页面或临时调试。内联样式（style="..."）和 <style></style> 块只在特定场景下合理，比如组件级作用域样式、服务端生成的动态样式，或邮件模板等受限制环境。
原因很实际：外部文件可缓存、可复用、便于团队协作；而内联样式无法继承、难维护、破坏 HTML 语义结构。
-
<style></style>块适合单页应用中的局部覆盖、CSS-in-JS 的 fallback 或 SSR 渲染时的 critical CSS 提取 - 内联样式（
style="color: red;"）仅用于 JS 动态控制单个元素状态，比如element.style.opacity = 0.5后的回退值 - 避免在
里写大量<style></style>，尤其含 @import 或复杂媒体查询时，会阻塞渲染
<link rel="stylesheet"> 的位置和加载行为
必须放在 内，且尽量靠前（但要在 <meta charset> 和 <title></title> 之后）。浏览器遇到 <link> 会立即发起请求，但默认同步阻塞 HTML 解析与渲染，直到 CSSOM 构建完成。
- 加
media="print"或media="(min-width: 768px)"可让对应 CSS 异步加载（不阻塞首屏） - 用
rel="preload"+as="style"配合onload注入，可手动控制加载时机（需 JS 辅助） - 不要把
<link>放到底部——部分浏览器会重排，且不符合 HTML 规范
内联 <style></style> 怎么写才不算“脏”？
如果非得用内联 <style></style>，就只放「首屏关键样式」（Critical CSS），且必须压缩、去注释、避免嵌套或复杂选择器。它不是用来写完整主题的。
立即学习“前端免费学习笔记（深入）”；
- 选择器层级不超过 2 级（如
.header-nav a可以，.layout .main .content p em不行） - 禁用
@import—— 它会触发额外 HTTP 请求并阻塞 - 避免使用
!important，它会让后续样式调试变成黑洞 - 若用构建工具（如 Vite/webpack），应由插件自动提取并内联，而不是人手拷贝
为什么 style="..." 属性容易引发维护灾难？
因为它的优先级高于所有外部和内部样式表（除了带 !important 的规则），而且完全脱离 CSS 管理体系。一旦多个 JS 模块都直接操作 element.style.xxx，最终样式来源根本没法追溯。
- JS 中改样式，优先用 class 切换（
el.classList.add("is-loading")），而非el.style.display = "none" - 动画类过渡必须用 CSS
@keyframes+ class 控制，不要用el.style.transition拼接字符串 - 服务端渲染中若需动态 style，应走 data 属性 + CSS 属性选择器（如
[data-theme="dark"] .btn { ... }），而非拼 style 字符串
真正规范的样式组织，核心不是“写在哪”，而是“谁负责变更、如何被复用、出错了去哪查”。哪怕用了外部 CSS，如果命名混乱、无 scope 隔离、无 BEM 或 CSS Modules 约束，照样一地鸡毛。
