Vue中scoped通过为元素添加唯一data属性（如data-v-f3f3eg9）并为CSS选择器追加对应属性，实现样式仅作用于当前组件，避免全局污染。
Vue 组件开发中，样式与结构的模块分离不是要彻底拆开 .vue 文件，而是通过合理机制实现逻辑隔离与作用域管控，让样式不污染全局、结构更专注语义、维护更清晰。
用 scoped 实现样式局部化
这是最常用也最轻量的分离方式——结构（template）和样式（style）仍在同一文件，但 CSS 作用域被自动限制在当前组件内。
-
原理：Vue 编译时为 template 中每个元素添加唯一 data 属性（如
data-v-f3f3eg9），同时为 style 中的选择器追加对应属性，确保仅匹配本组件节点 -
写法：在
<style>标签上添加scoped属性<style scoped><br> .card { margin: 12px; }<br> button { background: #42b883; }<br></style> -
注意点：scoped 不影响子组件样式；若需穿透影响子组件，可用
::v-deep或:deep()（Vue 3 推荐）
用 CSS Modules 实现类名模块化
适合对样式复用性、命名冲突敏感的中大型项目，把样式“模块”真正变成可导入的对象。
-
写法：使用
<style module>，模板中通过$style对象绑定类名<template><br> <div :class="$style.container"><br> <span :class="$style.title">Hello</span><br> </div><br></template><br><style module><br> .container { padding: 16px; }<br> .title { font-weight: bold; }<br></style> -
优势：类名自动哈希（如
_container_1x2y3），天然避免冲突；支持动态类名组合与条件绑定 - 适用场景：设计系统组件库、需要高可控样式的业务组件
结构层面的解耦：模板抽离与逻辑聚焦
结构分离不等于把 HTML 拆成独立 .html 文件（不推荐），而是通过组件职责划分，让每个组件的 template 只表达自身语义，不掺杂样式控制或跨组件 DOM 操作。
立即学习“前端免费学习笔记（深入）”；
- 避免在 template 中写内联样式（
style="color:red"）或 class 判断逻辑（:class="{ active: isActive }"应配合明确的语义类名，而非样式值） - 用插槽（
<slot>）把结构开放给使用者，而不是在组件内部硬编码布局 - 复杂 UI 可进一步拆分子组件（如
UserCardHeader、UserCardBody），每个只负责一段纯净结构 + 对应 scoped 样式
全局与局部的协同管理
完全隔离不现实，合理分层才高效。
-
基础样式（重置、字体、间距、色彩变量）放在
assets/styles/variables.css或scss中，全局引入 -
组件专属样式严格走 scoped 或 CSS Modules，禁止直接写全局类名（如
.btn-primary）除非是统一设计规范类 -
工具类（如
mt-4、text-center）建议用 Tailwind 等原子 CSS 方案，它们天生具备作用域友好性，且不增加选择器耦合
