# 始终为组件样式设置作用域

全局样式容易污染其他组件样式。在vue组件中一旦使用了全局的style，那么你必将陷入无限的梦魇，因为你根本不知道什么时候组件的样式就被全局样式污染了。因此，建议始终为组件样式设置作用域。

# CSS Scoped规范

CSS Scoped规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。

vue组件中的style设置scoped属性时，表明style里的css样式只适用于当前组件元素，不会对其他组件起作用：

<style scoped>
...
</style>

使用了scoped属性之后，父组件的style样式将不会渗透到子组件中。但有时候需要在父组件中修改子组件样式，或修改第三方组件库的样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时可以使用深选择器 >>> 或 /dee/。

stylus预处理语言的样式穿透使用 >>> 选择器：

.wrapper >>> .el-button {
  border-radius:0;
}

sass和less预处理语言的样式穿透使用 /deep/ 选择器：

.wrapper /deep/ .el-button {
  border-radius:0;
}

# CSS Modules规范

CSS Modules是一个用于模块化和组合 CSS 的流行系统。vue-loader 提供了与 CSS 模块的一流集成，可以作为模拟 CSS 作用域的替代方案。

CSS Modules的使用方法如下：

<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- 使用 CSS Modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>

更多关于vue使用CSS Modules请移步官方介绍