Vue中的作用域CSS和CSS模块的区别

现代Web开发中的CSS离完美还差得远，这并不奇怪。现在，项目通常是相当的复杂的，而CSS样式又是全局性的，所以到最后总是极容易地发生样式冲突： 样式相互覆盖 或 隐式地级联到我们未考虑到的元素 。

为了减轻CSS存在的主要痛点，我们在项目中普遍采用 BEM 的方法来。不过这只能解决CSS问题中的一小部分。

对我们来说是幸运的，社区已经开发出了可以帮助我们更彻底地解决问题的解决方案。你可能已经听说过 CSS Modules 、 Styled Componetns 、 Glamorous 或 JSS 。这些只是我们今天可以添加到项目中的一些最流行的工具。如果你对这个话题感兴趣，你可以查看这篇文章： @Indrek Lasn 详细介绍了 CSS in JS的全部思想 。

使用Vue-cli构建的Vue应用程序提供了两个很棒的内置解决方案： 作用域CSS 和 CSS Modules 。它们都有一些优点和缺点，所以让我们仔细看看哪种解决方案更适合你。

作用域CSS

在Vue中引入了CSS作用域 scoped 这个概念， scoped 的设计思想就是让当前组件的样式不会影响到其他地方的样式，编译出来的选择器将会带上 data-v-hash 的方式来应用到对应的组件中，这样一来，CSS也不需要添加额外的选择器。也将解决CSS中选择器作用域和选择器权重的问题。

在Vue中，为了让作用域样式工作，只需要在 <style> 标签添加 scoped 属性：

<!-- Button.vue -->
<template>
 <button class="btn">
 <slot></slot>
 </button>
</template>
<style scoped>
 .btn {
 color: red;
 }
</style>

通过使用PostCSS并将上面的示例转换为以下内容，它仅将我们的样式应用于相同的组件中的元素：

就像你看到的一样，整个过程不需要做什么就可以达到很好的效果： 作用域样式 （CSS中一直以来令人头痛的问题之一）。

现在假设你需要调整 Button 组件的宽度，你可以像平常使用一样，在调用这个组件的地方添加一个额外的 class 来设置其样式：

<!-- App.vue -->
<template>
 <div id="app">
 <Button class="btn-lg">click</Button>
 </div>
</template>
<script>
 import Button from "./components/Button";
 export default {
 name: "App",
 components: {
  Button
 }
 };
</script>
<style scoped>
 .btn-lg {
 padding: 10px 30px;
 }
</style>