Vue Scoped原理是为组件根元素添加唯一data-v-xxxx属性，并将样式选择器重写为.class[data-v-xxxx]实现隔离；其局限在于无法作用于子组件、slot内容及第三方组件，需用:deep或:global穿透。
用属性选择器强制限定作用域
给组件根元素加唯一属性（比如 data-component="user-card"），再用属性选择器写样式：[data-component="user-card"] .title { color: var(--user-card-title-color, #222); }。这种方式不依赖类名，也不怕全局类冲突，连第三方库的默认样式都能压住。
常见错误是只加属性不加选择器前缀，导致规则泄漏：.title 还是全局生效；必须写成 [data-component="xxx"] .title 才真正隔离。
- 属性值建议用短字符串（避免空格、特殊字符），和组件名强绑定
- 不要用
[data-*]通配，每次明确指定属性名，否则调试时找不到来源 - 配合 CSS 变量时，变量也得在该属性选择器内声明，否则 fallback 会取到 :root 的值
为什么 scoped 样式在 Vue 里有时失效
<style scoped> 的原理是给元素加 data-v-xxx 属性，再把所有选择器自动补上这个属性。但它对子组件 slot 内容、第三方组件、<style> 外部注入的样式都无效——这些 DOM 没被加哈希属性，自然不匹配。
比如父组件用了 <child><span slot="header">标题</span></child>，scoped 样式写 span { color: red; } 不会生效，因为 span 没带 data-v-xxx。
立即学习“前端免费学习笔记（深入）”；
- 要用
:deep(.child-title)或::v-deep .child-title穿透，但仅限影响子组件内部结构 - 第三方组件（如 Element Plus）必须用
:global(.el-button)+ 显式前缀控制，不能靠 scoped - SSR 场景下，服务端生成的
data-v-xxx和客户端不一致，会导致首屏样式错乱
避免 BEM 命名破坏组件独立性
BEM 的 Block 必须能脱离上下文单独存在。.card 是 Block，.card__header 是 Element，但 .sidebar-card 或 .grid-card 就不是——它们绑定了布局语义，一挪地方就失效。
真正独立的 Block 不该含 margin、float、position 等布局属性，只管自身视觉表现：padding、border、字体、阴影。所有“怎么放”的事交给容器，不是组件自己决定。
-
.card里写margin-bottom: 1rem是典型反模式，它把组件变成了“带固定间距的卡片” - 修饰符必须挂根节点：
.card--compact合法，.card__body--compact无法被调用方触发 - 两个 Block 组合时（如
<div class="card"><div class="list"></div></div>），各自样式文件互不 import 变量，才叫真独立
什么时候该放弃 CSS 变量，改用 currentColor
当组件只需要一种颜色行为——比如图标、边框、伪元素要和文字色一致——currentColor 比 CSS 变量更轻、更稳、无污染。它不依赖任何自定义变量声明，只读当前元素的 color 值。
例如按钮内图标：.btn::before { content: ""; border: 2px solid currentColor; }，只要 .btn { color: #007bff; }，图标边框就自动同步，不用声明 --btn-icon-color。
- 一旦组件内重设了
color（如.btn:hover { color: #0056b3; }），所有currentColor会自动响应，CSS 变量做不到这点 - 但它不能替代多值控制，比如同时要背景、文字、阴影三种颜色，还是得用带前缀的变量（
--button-bg、--button-text） - 注意：伪元素、SVG
fill、stroke都支持currentColor，但 background-image 里的渐变不支持
