可行但不推荐用于组件级样式管理，应仅在index.html中引入normalize.css、CSS变量、全局动画等跨应用资源，组件样式须用CSS Modules或scoped实现作用域隔离。
直接在 index.html 中用 <link> 引入全局 CSS 是否可行？
可行，但不推荐用于组件级样式管理。单页应用（SPA）中，index.html 的 <link rel="stylesheet"> 适合加载重置样式、字体、基础布局等全局资源。一旦把组件专属样式也塞进这里，就会失去作用域隔离，容易出现命名冲突、样式泄露、无法按需加载等问题。
常见错误现象：.button { color: red; } 在多个组件里重复定义，结果相互覆盖；热更新时样式残留；构建后未使用的 CSS 仍被打包进主文件。
- 只放真正跨整个应用的样式，比如
normalize.css、自定义:root变量、全局动画 keyframes - 避免在这里 import 组件相关 CSS 文件（如
Header.css） - Webpack/Vite 等构建工具会把这类外部 link 视为静态资源，不参与 CSS 模块化处理
Vue/React 项目中怎么让组件样式“各自为政”？
靠 CSS Modules 或 CSS-in-JS 方案实现局部作用域。以 Vue 的 <style scoped> 和 React 中 import './Button.module.css' 为例，它们本质都是在编译时给类名加哈希后缀，再通过属性选择器限定作用范围。
使用场景：按钮、卡片、表单控件等有明确复用边界、不希望影响外部或被外部影响的 UI 单元。
立即学习“前端免费学习笔记（深入）”；
-
<style scoped>在 Vue 单文件组件中生效，但对深度选择器（如::v-deep）要小心，它会穿透作用域 - React 中若用
.module.css，必须确保文件名含module，且导入时变量名需匹配类名：import styles from './Button.module.css'; <button className={styles.primary}> - CSS Modules 不支持全局类名复用，想共用某个
text-sm类？得抽成独立工具类文件 +:global(.text-sm)
如何在运行时动态切换主题（如暗色模式）？
核心是操作 document.documentElement 的 class 属性，并配合 CSS 自定义属性（CSS Variables）做响应式声明。不要用 JS 直接改每个元素的 style，那样不可维护、无法继承、丢失过渡动画。
性能影响：CSS 变量本身无渲染开销，但频繁触发 document.body.classList.toggle() 会引发重排（re-layout），建议用 requestIdleCallback 或节流包裹切换逻辑。
- 在
:root中定义两套变量：--bg-color: #fff; --text-color: #333;和.dark-mode { --bg-color: #1a1a1a; --text-color: #eee; } - 所有组件样式都基于这些变量写，例如
background-color: var(--bg-color); color: var(--text-color); - 切换时只执行
document.documentElement.classList.toggle('dark-mode')，其余交由 CSS 引擎计算
构建后 CSS 文件体积过大，怎么定位和裁剪？
不是所有引入的 CSS 都会被实际用到。尤其当用了第三方 UI 库（如 Ant Design、Element Plus）又只用了其中几个组件时，整套样式全打进 bundle 就很浪费。
关键排查点：webpack-bundle-analyzer 或 Vite 的 build.report 能直观看到 CSS 文件来源；Chrome DevTools 的 Coverage 面板可标出未执行的 CSS 规则（注意：仅反映当前页面路径下的未用样式）。
- 检查是否误用了
import 'xxx/dist/index.css'—— 改为按需导入，例如import 'ant-design-vue/es/button/style/css' - 确认构建配置中
css.extract是否开启（Vite）或mini-css-extract-plugin是否启用（Webpack），否则 CSS 会内联进 JS，增大首屏 JS 体积 - 慎用
@import，它会阻塞并行加载；改用构建工具的postcss-import插件做编译期合并
:root {
--primary: #1890ff;
}
.dark-mode {
--primary: #40a9ff;
}
button {
background-color: var(--primary);
transition: background-color 0.2s;
}
复杂点在于：CSS 变量不能用在 @media 外层条件中做计算，也不能直接被 JavaScript 读取“计算后值”（得用 getComputedStyle）。这些边界情况，往往在换肤逻辑变多时才暴露出来。
