大漠
大漠

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中，为了让作用域样式工作，只需要在

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

Vue中的作用域CSS和CSS模块的区别_第1张图片

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

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

转换后就像下面这样：

Vue中的作用域CSS和CSS模块的区别_第2张图片

这次还是一样，不需要做什么就可以很好的控制样式。

不过请注意：这个特性存在一个缺陷，即如果你子组件的元素上有一个类已经在这个父组件中定义过了，那么这个父组件的样式就也会应用到子组件上。只不过其权重没有子组件同类名的重。比如下面这个示例：

编译出来的效果如下：

Vue中的作用域CSS和CSS模块的区别_第3张图片

还有一些情况是我们需要对子组件的深层次结构设置样式。虽然这种做法并不受推荐，而且应该尽量去避免。比如下面这个示例， Button 组件下有一个 标签，而在调用 Button 组件的父组件 App 中设置 span 样式：

编译出来的结果如下：

Vue中的作用域CSS和CSS模块的区别_第4张图片

从上面的结果可以看出来，在父组件 App.vue 中的样式：

.btn span {
 color: green;
 font-weight: bold;
 border: 1px solid green;
 padding: 10px;
}

上面这段样式并没有编译出来，运用到子组件 Button.vue 中的 span 中。

在 scoped 样式中，这种情况可以使用 >>> 连接符或者 /deep/ 来解决：

此时虽然依旧是在 App.vue 中 scoped 控制 Button.vue 组件中 span ，但上面不同的是，这次样式生效。编译出来的结果如下：

Vue中的作用域CSS和CSS模块的区别_第5张图片

另外使用作用域样式还存在一个问题。那就是对 v-html 中内在的标签样式不生效。比如下面这个示例：

编译出来的结果如下：

Vue中的作用域CSS和CSS模块的区别_第6张图片

从上图可以看出来， v-html 中的 strong 标签样式并未生效。和前面在父组件的 scoped 中设置子组件内部标签未生效一样。当然，其解决方案也是同样的， 使用 >>> 连接符或 /deep/ 可以让 v-html 中的标签样式生效。比如上面的示例，可以将代码修改为：

这个时候 v-html 中的 strong 样式生效了，如下图所示：

Vue中的作用域CSS和CSS模块的区别_第7张图片

话又说回来，虽然 >>> 或 /deep/ 可以帮助我们穿透已封装好的组件中的样式，但这也失去了组件封装的效果。再次回到以前CSS中令人头痛的问题： CSS作用域 。

简单的小结一下，在Vue中 scoped 属性的渲染规则：

给DOM节点添加一个不重复的 data 属性（比如 data-v-7ba5bd90 ）来表示他的唯一性
在每个CSS选择器末尾（编译后生成的CSS）加一个当前组件的 data 属性选择器（如 [data-v-7ba5bd90] ）来私有化样式。选择器末尾的 data 属性和其对应的DOM中的 data 属性相匹配
如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的 data 属性
上面我们看到的是Vue机制内作用域CSS的使用。在Vue中，除了作用域CSS之外，还有另外一种机制，那就是 CSS Modules ，即 模块化CSS 。

CSS Modules

CSS Modules的流行起源于React社区，它获得了社区的迅速的采用。Vue更甚之，其强大，简便的特性在加上Vue-cli对其开箱即用的支持，将其发展到另一个高度。

在Vue中使用CSS Modules和作用域CSS同样的简单。和作用域CSS类似，在

然后在