全局CSS必须统一入口加载，即仅在src/app.css中定义重置规则、字体、主题变量等真正全局样式，并通过布局文件中的@import url('/app.css')引入，以确保HMR正常、样式可控且可复用。
全局CSS必须统一入口加载，不能分散在组件
全局CSS该放哪、怎么加载才稳定
真正该全局的样式（重置规则、字体定义、主题变量、基础间距）只应放在src/app.css里。然后在布局文件顶部用引入。SvelteKit v1 用src/routes/__layout.svelte，v2 用src/routes/+layout.svelte。这样既受 Svelte 生命周期管理，又支持 PostCSS、HMR 正常、构建时可提取。
- 别在某个组件里写
:global(body) { background: #fff; }——它会生效，但多个组件重复写，谁后加载谁赢，调试时根本没法追踪 - 不要用
直接导入，这种写法不带global修饰，会被局部化，@import路径也容易因编译顺序出错 - 如果项目用了 Windi CSS 或 Tailwind，
src/app.css里就只留@layer base {}和@layer components {}这类框架指令，实际样式由工具生成，不手写
:global()不是全局开关，是选择器穿透器
:global()只放行括号内的选择器部分，且不能嵌套。写错就等于没写：
-
:global(.btn) { color: red; }→ 所有.btn类都生效，安全 -
.container :global(.btn)→ 只影响当前组件内.container下的.btn，可控 -
:global(.a .b)→ 整个选择器被放行，浏览器原生解析，有效 -
:global(.a) .b→.a全局匹配，.b仍被局部化，大概率不生效 - 别写
:global(.third-party) button去改第三方组件按钮——先确认它真渲染了带.third-party的容器，且没用$$props.class却没绑定到根节点
{@html}、slot 和富文本里的样式怎么管
{@html}插入的内容不会被加作用域属性，.content h1这种写法无效：
- 用 wrapper 包一层：{@html unsafeHtml}
- 在组件
中写：.rich-content :global(h1) { font-size: 2.4rem; } - 别写
:global(.rich-content h1)——.rich-content是局部类，会被哈希化，:global()不处理它 -
class，要么用:global()显式穿透，但要注意异步渲染时机——{#if show}{/if}里:global(.modal)可能因show = false被清理掉
真正难的不是让样式“生效”，而是让变更、复用、调试都可预期。:global()是手术刀，不是胶水；src/app.css才是主干血管——一旦发现三个以上组件重复写:global(.card)，说明该抽成外部 CSS 文件了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
