原子类、scoped CSS、CSS-in-JS 各有适用场景：原子类适合标准化后台系统但维护性差；scoped CSS 编译期零开销但穿透滥用易导致样式冲突；CSS-in-JS 解决动态样式需求但需注意 SSR 和性能。
原子类（Atomic CSS）为什么让开发者又爱又恨
原子类本身没毛病，问题出在“谁来组织它”。像 mt-4、text-center 这类类名，编译后确实轻量、复用率高，但写 HTML 时得反复查文档或靠记忆拼凑样式逻辑——flex + items-center + justify-between 一串下来，语义已经模糊了。
常见错误现象：class="p-2 bg-blue-500 text-white flex items-center hover:bg-blue-600" 看似没问题，但换主题时所有 bg-blue-500 得全局替换；更麻烦的是，当某个组件需要微调 items-center 为 items-start，你得改 HTML，而不是只动 CSS。
- 使用场景：适合高度标准化的后台系统、设计系统已冻结的项目，或 SSR 渲染对首屏 CSS 体积敏感的场景
- 性能影响：CSS 文件体积小，但 HTML 体积显著增大，gzip 后差距收窄，但 JS 解析 DOM 的负担实打实上升
- 兼容性无问题，但和传统 BEM 或 CSS-in-JS 的协作成本高——比如用
styled-components封装一个按钮，再往里塞一堆 Tailwind 原子类，就等于把样式控制权交给了两套体系
CSS作用域（scoped CSS）在 Vue 和 Svelte 中的实际边界
:scope 伪类浏览器支持差，真正起作用的是框架级的作用域机制。Vue 的 <style scoped></style> 和 Svelte 的默认样式，本质都是属性选择器注入（如 div[data-v-f3f2d1a2]），不是真正的 Shadow DOM 隔离。
容易踩的坑：scoped 下的 ::before 能生效，但 :deep(.child) 或 :global(.reset) 一旦滥用，就等于主动撕开口子——特别是 :deep() 会穿透到子组件内部，如果子组件也用了 scoped，就可能出现样式优先级混乱或意外覆盖。
- 参数差异：Vue 3 的
<style scoped module></style>会生成模块化类名并导出，适合搭配 TS 类型推导；Svelte 则默认局部，加:global(...)才全局 - 使用场景：组件粒度清晰、不常被外部定制的 UI 库内部实现；不适合需要深度主题定制的组件（比如一个
DatePicker要允许用户重写日历格子的 hover 样式） - 性能影响：编译期插入属性选择器，对运行时零开销；但大量使用
:deep()会让 CSS 规则变长，影响浏览器样式匹配效率
CSS-in-JS 的动态能力到底在解决什么真问题
不是为了“把 CSS 写进 JS”，而是为了解决“样式依赖运行时状态”这个硬需求。比如暗色模式切换时根据 prefers-color-scheme 动态计算颜色值，或图表库中每个数据点的颜色由 props 实时生成——这些没法靠预设原子类或静态 scoped 规则覆盖。
典型错误现象：用 styled-components 写 const Button = styled.button\`padding: ${props => props.size === 'lg' ? '12px 24px' : '8px 16px'};\`，看似灵活，但每次渲染都重新解析字符串模板，且无法提取为静态 CSS；更隐蔽的问题是，服务端渲染时若未同步注入样式表，首屏会出现 FOUC。
- 使用场景：需要响应 props、theme、breakpoint 等动态变量的组件；动画关键帧需按数据生成的可视化模块
- 性能影响：Emotion 支持 CSS 提取（
css函数 +CacheProvider），但 styled-components 默认每实例一规则，大量同类型组件会重复生成相同样式 - 兼容性上，所有主流库都支持 SSR，但调试时 DevTools 显示的是哈希类名（如
sc-bdVaJa），而非原始组件名，排查需配合 source map 或插件
现代框架里，真该放弃 CSS 选择器了吗
没有放弃，只是选择器的“责任”转移了：从“精准定位 DOM 结构”转向“表达组件意图”。比如用 [data-testid="submit-btn"] 替代 .form-footer > button:last-child 做测试，用 data-state="loading" 替代 .btn.loading 控制状态样式——结构弱化，语义强化。
最容易被忽略的一点：CSS 选择器层级本身仍是性能瓶颈。Chrome DevTools 的 “Layers” 面板能直接看到哪些规则触发了重排，而 .card .header h1 这种三级嵌套，在元素数量多时比 .card-header-title 多出近 3 倍匹配耗时。框架不会替你优化这个，得靠人工收敛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
