Vue样式scoped存在的问题

为了解决css存在的一大痛点：天生全局性，每个通过 vue-cli 创建的 Vue.js 应用都内置了两个很好的解决方案：Scoped CSS 和 CSS Modules (模块式 CSS)。现在我们只介绍Scoped CSS.
我们只需在<style>标签上添加scoped属性就可以让样式只应用到该组件的元素上。

<template>
  <button class=”button” />
</template>

<style scoped>
  .button {
    color: red;
  }
</style>

这是通过postCSS实现的，将转换为以下代码：

<style>
.button[data-v-f61kqi1] {
  color: red;
}
</style>

<button class=”button” data-v-f61kqi1></button>

但是，这个特性存在一个缺陷！！!

如果你子组件的根元素上有一个类已经在这个父组件中定义过了，那么这个父组件的样式就会泄露到子组件中
我们在父元素中定义wrapper类边框为蓝色，在子组件中定义同一个名字的类wrapper类边框为橙色，结果会导致子组件中既有父元素的蓝色边框又有自己的橙色边框：

因此，我们要避免在父组件中书写和子组件同名的css类。

http://www.cnblogs.com/ssming/p/10033894.html