可行但不推荐用于组件级样式管理，应仅在index.html中引入normalize.css、CSS变量、全局动画等跨应用资源，组件样式须用CSS Modules或scoped实现作用域隔离。
直接在 index.html 中用
可行，但不推荐用于组件级样式管理。单页应用（SPA）中，index.html 的 适合加载重置样式、字体、基础布局等全局资源。一旦把组件专属样式也塞进这里，就会失去作用域隔离，容易出现命名冲突、样式泄露、无法按需加载等问题。
常见错误现象：.button { color: red; } 在多个组件里重复定义，结果相互覆盖；热更新时样式残留；构建后未使用的 CSS 仍被打包进主文件。
- 只放真正跨整个应用的样式，比如
normalize.css、自定义:root变量、全局动画 keyframes - 避免在这里 import 组件相关 CSS 文件（如
Header.css） - Webpack/Vite 等构建工具会把这类外部 link 视为静态资源，不参与 CSS 模块化处理
Vue/React 项目中怎么让组件样式“各自为政”？
靠 CSS Modules 或 CSS-in-JS 方案实现局部作用域。以 Vue 的 和 React 中 import './Button.module.css' 为例，它们本质都是在编译时给类名加哈希后缀，再通过属性选择器限定作用范围。
使用场景：按钮、卡片、表单控件等有明确复用边界、不希望影响外部或被外部影响的 UI 单元。
立即学习“前端免费学习笔记（深入）”；
-
在 Vue 单文件组件中生效，但对深度选择器（如::v-deep）要小心，它会穿透作用域 - React 中若用
.module.css，必须确保文件名含module，且导入时变量名需匹配类名：import styles from './Button.module.css'; - CSS Modules 不支持全局类名复用，想共用某个
text-sm类？得抽成独立工具类文件 +:global(.text-sm)
如何在运行时动态切换主题（如暗色模式）？
核心是操作 document.documentElement 的 class 属性，并配合 CSS 自定义属性（CSS Variables）做响应式声明。不要用 JS 直接改每个元素的 style，那样不可维护、无法继承、丢失过渡动画。
