vue 中的样式

理想的样式解决方案，期待达到以下目的：

1. 样式方便复用

2. 能轻易避免冲突，样式冲突往往难以定位

3. 开发体验好，使用 scss 、less 等预处理，能提高开发效率和体验

4. 方便修改样式

5. 其他，比如兼容 css，降低学习成本

今天看看 vue 的样式解决方案，能否满足以上要求。

scoped 样式

style 标签上添加 scoped 标志，可以把样式作用范围限制在组件内，即组件内部的样式不会影响外部的样式。

原理：组件编译时给标签添加 data-v-xxx 属性，选择器附带该属性。

deep 样式

vue 提供了特殊的 :deep 选择器，可将父组件的样式作用到子组件内部。

v-deep 已经废弃。

将 vue component 转为 web component，deep 样式不生效。

slot 样式

在组件内部编写 slot 的样式

/* slot 里包含选择器 selector  */
:slotted(selector) {
   
  color: blue;
}

全局样式

1. 引入多个 style，没有 scoped 的样式块，全局生效。