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 的样式块，全局生效。

<style>
  /* global styles */
</style>

<style scoped>
  /* local styles */
</style>

2. :global – 希望单条规则全局生效

:global(.yellow) {
  color: yellow;
}

v-bind 绑定动态属性

.progress-bar>div {
  background-color: #000;
  width: v-bind('props.progress');
  /* props.progress 是 props 属性*/
  height: 8px;
  border-radius: 10px;
  transition-property: width;
  transition-duration: 150ms;
}

style module

<template>
  <div>
    <p :class="$style.red">This should be red</p>
    <h3>HelloWorld</h3>
  </div>
</template>

<style module>
  .red {
    color: red;
  }
</style>

style module 能很好做到样式隔离，原理：重写选择器，使其全局唯一。

感觉在模板语法中用 style module，不如 scoped 好，更加适合 JSX。

CSS Modules 用法教程

更多参考

编写组件样式表